perf: optimize components and add comments

package.json

@@ -35,7 +35,7 @@
     "@iconify/iconify": "^2.0.1",
     "@logicflow/core": "^0.4.11",
     "@logicflow/extension": "^0.4.12",
-    "@vueuse/core": "^4.11.2",
+    "@vueuse/core": "^5.0.1",
     "@zxcvbn-ts/core": "^0.3.0",
     "ant-design-vue": "2.1.2",
     "axios": "^0.21.1",
@@ -63,7 +63,7 @@
   "devDependencies": {
     "@commitlint/cli": "^12.1.4",
     "@commitlint/config-conventional": "^12.1.4",
-    "@iconify/json": "^1.1.353",
+    "@iconify/json": "^1.1.354",
     "@purge-icons/generated": "^0.7.0",
     "@types/codemirror": "^5.60.0",
     "@types/crypto-js": "^4.0.1",
@@ -71,13 +71,13 @@
     "@types/inquirer": "^7.3.1",
     "@types/lodash-es": "^4.17.4",
     "@types/mockjs": "^1.0.3",
-    "@types/node": "^15.12.1",
+    "@types/node": "^15.12.2",
     "@types/nprogress": "^0.2.0",
     "@types/qrcode": "^1.4.0",
     "@types/qs": "^6.9.6",
     "@types/sortablejs": "^1.10.6",
-    "@typescript-eslint/eslint-plugin": "^4.26.0",
-    "@typescript-eslint/parser": "^4.26.0",
+    "@typescript-eslint/eslint-plugin": "^4.26.1",
+    "@typescript-eslint/parser": "^4.26.1",
     "@vitejs/plugin-legacy": "^1.4.1",
     "@vitejs/plugin-vue": "^1.2.3",
     "@vitejs/plugin-vue-jsx": "^1.1.5",
@@ -92,7 +92,7 @@
     "eslint-define-config": "^1.0.8",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-vue": "^7.10.0",
-    "esno": "^0.7.0",
+    "esno": "^0.7.1",
     "fs-extra": "^10.0.0",
     "http-server": "^0.12.3",
     "husky": "^6.0.0",
@@ -121,14 +121,14 @@
     "vite-plugin-style-import": "^0.10.1",
     "vite-plugin-svg-icons": "^0.7.0",
     "vite-plugin-theme": "^0.8.1",
-    "vite-plugin-windicss": "^1.0.1",
+    "vite-plugin-windicss": "^1.0.2",
     "vue-eslint-parser": "^7.6.0",
     "vue-tsc": "^0.1.7"
   },
   "resolutions": {
     "//": "Used to install imagemin dependencies, because imagemin may not be installed in China. If it is abroad, you can delete it",
     "bin-wrapper": "npm:bin-wrapper-china",
-    "rollup": "^2.51.0"
+    "rollup": "^2.51.1"
   },
   "repository": {
     "type": "git",

src/components/Application/index.ts

-import AppLogo from './src/AppLogo.vue';
-import AppProvider from './src/AppProvider.vue';
-import AppSearch from './src/search/AppSearch.vue';
-import AppLocalePicker from './src/AppLocalePicker.vue';
-import AppDarkModeToggle from './src/AppDarkModeToggle.vue';
+import { withInstall } from '/@/utils';
+
+import appLogo from './src/AppLogo.vue';
+import appProvider from './src/AppProvider.vue';
+import appSearch from './src/search/AppSearch.vue';
+import appLocalePicker from './src/AppLocalePicker.vue';
+import appDarkModeToggle from './src/AppDarkModeToggle.vue';
 
 export { useAppProviderContext } from './src/useAppContext';
-export { AppLogo, AppProvider, AppSearch, AppLocalePicker, AppDarkModeToggle };
+
+export const AppLogo = withInstall(appLogo);
+export const AppProvider = withInstall(appProvider);
+export const AppSearch = withInstall(appSearch);
+export const AppLocalePicker = withInstall(appLocalePicker);
+export const AppDarkModeToggle = withInstall(appDarkModeToggle);

src/components/Application/src/AppDarkModeToggle.vue

 <template>
-  <div
-    v-if="getShowDarkModeToggle"
-    :class="[
-      prefixCls,
-      {
-        [`${prefixCls}--dark`]: isDark,
-      },
-    ]"
-    @click="toggleDarkMode"
-  >
+  <div v-if="getShowDarkModeToggle" :class="getClass" @click="toggleDarkMode">
     <div :class="`${prefixCls}-inner`"> </div>
     <SvgIcon size="14" name="sun" />
     <SvgIcon size="14" name="moon" />
@@ -16,25 +7,29 @@
 </template>
 <script lang="ts">
   import { defineComponent, computed } from 'vue';
-
-  import { useDesign } from '/@/hooks/web/useDesign';
-
   import { SvgIcon } from '/@/components/Icon';
+  import { useDesign } from '/@/hooks/web/useDesign';
   import { useRootSetting } from '/@/hooks/setting/useRootSetting';
   import { updateHeaderBgColor, updateSidebarBgColor } from '/@/logics/theme/updateBackground';
   import { updateDarkTheme } from '/@/logics/theme/dark';
-
   import { ThemeEnum } from '/@/enums/appEnum';
 
   export default defineComponent({
     name: 'DarkModeToggle',
     components: { SvgIcon },
     setup() {
-      const { prefixCls } = useDesign('dark-mode-toggle');
+      const { prefixCls } = useDesign('dark-switch');
       const { getDarkMode, setDarkMode, getShowDarkModeToggle } = useRootSetting();
 
       const isDark = computed(() => getDarkMode.value === ThemeEnum.DARK);
 
+      const getClass = computed(() => [
+        prefixCls,
+        {
+          [`${prefixCls}--dark`]: isDark,
+        },
+      ]);
+
       function toggleDarkMode() {
         const darkMode = getDarkMode.value === ThemeEnum.DARK ? ThemeEnum.LIGHT : ThemeEnum.DARK;
         setDarkMode(darkMode);
@@ -44,6 +39,7 @@
       }
 
       return {
+        getClass,
         isDark,
         prefixCls,
         toggleDarkMode,
@@ -53,7 +49,7 @@
   });
 </script>
 <style lang="less" scoped>
-  @prefix-cls: ~'@{namespace}-dark-mode-toggle';
+  @prefix-cls: ~'@{namespace}-dark-switch';
 
   html[data-theme='dark'] {
     .@{prefix-cls} {

src/components/Application/src/AppLocalePicker.vue

@@ -13,39 +13,44 @@
   >
     <span class="cursor-pointer flex items-center">
       <Icon icon="ion:language" />
-      <span v-if="showText" class="ml-1">{{ getLangText }}</span>
+      <span v-if="showText" class="ml-1">{{ getLocaleText }}</span>
     </span>
   </Dropdown>
 </template>
 <script lang="ts">
   import type { LocaleType } from '/#/config';
   import type { DropMenu } from '/@/components/Dropdown';
-
   import { defineComponent, ref, watchEffect, unref, computed } from 'vue';
   import { Dropdown } from '/@/components/Dropdown';
-  import Icon from '/@/components/Icon';
-
+  import { Icon } from '/@/components/Icon';
   import { useLocale } from '/@/locales/useLocale';
   import { localeList } from '/@/settings/localeSetting';
-  import { propTypes } from '/@/utils/propTypes';
+
+  const props = {
+    /**
+     * Whether to display text
+     */
+    showText: { type: Boolean, default: true },
+    /**
+     * Whether to refresh the interface when changing
+     */
+    reload: { type: Boolean },
+  };
 
   export default defineComponent({
     name: 'AppLocalPicker',
     components: { Dropdown, Icon },
-    props: {
-      // Whether to display text
-      showText: propTypes.bool.def(true),
-      // Whether to refresh the interface when changing
-      reload: propTypes.bool,
-    },
+    props,
     setup(props) {
       const selectedKeys = ref<string[]>([]);
 
       const { changeLocale, getLocale } = useLocale();
 
-      const getLangText = computed(() => {
+      const getLocaleText = computed(() => {
         const key = selectedKeys.value[0];
-        if (!key) return '';
+        if (!key) {
+          return '';
+        }
         return localeList.find((item) => item.event === key)?.text;
       });
 
@@ -60,11 +65,13 @@
       }
 
       function handleMenuEvent(menu: DropMenu) {
-        if (unref(getLocale) === menu.event) return;
+        if (unref(getLocale) === menu.event) {
+          return;
+        }
         toggleLocale(menu.event as string);
       }
 
-      return { localeList, handleMenuEvent, selectedKeys, getLangText };
+      return { localeList, handleMenuEvent, selectedKeys, getLocaleText };
     },
   });
 </script>

src/components/Application/src/AppLogo.vue

@@ -3,63 +3,69 @@
  * @Description: logo component
 -->
 <template>
-  <div
-    class="anticon"
-    :class="[prefixCls, theme, { 'collapsed-show-title': getCollapsedShowTitle }]"
-    @click="handleGoHome"
-  >
+  <div class="anticon" :class="getAppLogoClass" @click="goHome">
     <img src="../../../assets/images/logo.png" />
-    <div
-      class="ml-2 truncate md:opacity-100"
-      :class="[
-        `${prefixCls}__title`,
-        {
-          'xs:opacity-0': !alwaysShowTitle,
-        },
-      ]"
-      v-show="showTitle"
-    >
+    <div class="ml-2 truncate md:opacity-100" :class="getTitleClass" v-show="showTitle">
       {{ title }}
     </div>
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent } from 'vue';
-
+  import { defineComponent, computed, unref } from 'vue';
   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';
+
+  const props = {
+    /**
+     * The theme of the current parent component
+     */
+    theme: { type: String, validator: (v) => ['light', 'dark'].includes(v) },
+    /**
+     * Whether to show title
+     */
+    showTitle: { type: Boolean, default: true },
+    /**
+     * The title is also displayed when the menu is collapsed
+     */
+    alwaysShowTitle: { type: Boolean },
+  };
 
   export default defineComponent({
     name: 'AppLogo',
-    props: {
-      /**
-       * The theme of the current parent component
-       */
-      theme: propTypes.oneOf(['light', 'dark']),
-      // Whether to show title
-      showTitle: propTypes.bool.def(true),
-      alwaysShowTitle: propTypes.bool.def(false),
-    },
-    setup() {
+    props: props,
+    setup(props) {
       const { prefixCls } = useDesign('app-logo');
       const { getCollapsedShowTitle } = useMenuSetting();
       const { title } = useGlobSetting();
       const go = useGo();
 
-      function handleGoHome(): void {
+      const getAppLogoClass = computed(() => [
+        prefixCls,
+        props.theme,
+        { 'collapsed-show-title': unref(getCollapsedShowTitle) },
+      ]);
+
+      const getTitleClass = computed(() => [
+        `${prefixCls}__title`,
+        {
+          'xs:opacity-0': !props.alwaysShowTitle,
+        },
+      ]);
+
+      function goHome() {
         go(PageEnum.BASE_HOME);
       }
 
       return {
-        handleGoHome,
+        getAppLogoClass,
+        getTitleClass,
+        getCollapsedShowTitle,
+        goHome,
         title,
         prefixCls,
-        getCollapsedShowTitle,
       };
     },
   });

src/components/Application/src/AppProvider.vue

 <script lang="ts">
   import { defineComponent, toRefs, ref, unref } from 'vue';
-
   import { createAppProviderContext } from './useAppContext';
-
-  import { prefixCls } from '/@/settings/designSetting';
   import { createBreakpointListen } from '/@/hooks/event/useBreakpoint';
-  import { propTypes } from '/@/utils/propTypes';
+  import { prefixCls } from '/@/settings/designSetting';
   import { useAppStore } from '/@/store/modules/app';
   import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
 
+  const props = {
+    /**
+     * class style prefix
+     */
+    prefixCls: { type: String, default: prefixCls },
+  };
+
   export default defineComponent({
     name: 'AppProvider',
     inheritAttrs: false,
-    props: {
-      prefixCls: propTypes.string.def(prefixCls),
-    },
+    props,
     setup(props, { slots }) {
       const isMobile = ref(false);
       const isSetState = ref(false);
 
       const appStore = useAppStore();
 
+      // Monitor screen breakpoint information changes
       createBreakpointListen(({ screenMap, sizeEnum, width }) => {
         const lgWidth = screenMap.get(sizeEnum.LG);
         if (lgWidth) {
@@ -30,8 +33,13 @@
       });
 
       const { prefixCls } = toRefs(props);
+
+      // Inject variables into the global
       createAppProviderContext({ prefixCls, isMobile });
 
+      /**
+       * Used to maintain the state before the window changes
+       */
       function handleRestoreState() {
         if (unref(isMobile)) {
           if (!unref(isSetState)) {

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

@@ -4,11 +4,11 @@
   import { SearchOutlined } from '@ant-design/icons-vue';
   import AppSearchModal from './AppSearchModal.vue';
   import { useI18n } from '/@/hooks/web/useI18n';
+
   export default defineComponent({
     name: 'AppSearch',
     setup() {
       const showModal = ref(false);
-
       const { t } = useI18n();
 
       function changeModal(show: boolean) {

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

 <template>
   <div :class="`${prefixCls}`">
-    <AppSearchKeyItem :class="`${prefixCls}__item`" icon="ant-design:enter-outlined" />
+    <AppSearchKeyItem :class="`${prefixCls}-item`" icon="ant-design:enter-outlined" />
     <span>{{ t('component.app.toSearch') }}</span>
-    <AppSearchKeyItem :class="`${prefixCls}__item`" icon="ion:arrow-up-outline" />
-    <AppSearchKeyItem :class="`${prefixCls}__item`" icon="ion:arrow-down-outline" />
+    <AppSearchKeyItem :class="`${prefixCls}-item`" icon="ion:arrow-up-outline" />
+    <AppSearchKeyItem :class="`${prefixCls}-item`" icon="ion:arrow-down-outline" />
     <span>{{ t('component.app.toNavigate') }}</span>
-    <AppSearchKeyItem :class="`${prefixCls}__item`" icon="mdi:keyboard-esc" />
+    <AppSearchKeyItem :class="`${prefixCls}-item`" icon="mdi:keyboard-esc" />
     <span>{{ t('common.closeText') }}</span>
   </div>
 </template>
@@ -21,10 +21,7 @@
     setup() {
       const { prefixCls } = useDesign('app-search-footer');
       const { t } = useI18n();
-      return {
-        prefixCls,
-        t,
-      };
+      return { prefixCls, t };
     },
   });
 </script>
@@ -44,7 +41,7 @@
     align-items: center;
     flex-shrink: 0;
 
-    &__item {
+    &-item {
       display: flex;
       width: 20px;
       height: 18px;

src/components/Application/src/search/AppSearchKeyItem.vue

@@ -8,8 +8,6 @@
   import { Icon } from '/@/components/Icon';
   export default defineComponent({
     components: { Icon },
-    props: {
-      icon: String,
-    },
+    props: { icon: String },
   });
 </script>

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

@@ -12,7 +12,6 @@
               @change="handleSearch"
             >
               <template #prefix>
-                <!-- <Icon icon="ion:search"/> -->
                 <SearchOutlined />
               </template>
             </Input>
@@ -59,21 +58,20 @@
 </template>
 <script lang="ts">
   import { defineComponent, computed, unref, ref, watch, nextTick } 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 { useI18n } from '/@/hooks/web/useI18n';
   import { useAppInject } from '/@/hooks/web/useAppInject';
 
-  import { propTypes } from '/@/utils/propTypes';
+  const props = {
+    visible: { type: Boolean },
+  };
 
   export default defineComponent({
     name: 'AppSearchModal',
@@ -81,17 +79,16 @@
     directives: {
       clickOutside,
     },
-    props: {
-      visible: propTypes.bool,
-    },
+    props,
     emits: ['close'],
     setup(props, { emit }) {
       const scrollWrap = ref<ElRef>(null);
-      const { prefixCls } = useDesign('app-search-modal');
+      const inputRef = ref<Nullable<HTMLElement>>(null);
+
       const { t } = useI18n();
+      const { prefixCls } = useDesign('app-search-modal');
       const [refs, setRefs] = useRefs();
       const { getIsMobile } = useAppInject();
-      const inputRef = ref<Nullable<HTMLElement>>(null);
 
       const { handleSearch, searchResult, keyword, activeIndex, handleEnter, handleMouseenter } =
         useMenuSearch(refs, scrollWrap, emit);
@@ -109,8 +106,8 @@
 
       watch(
         () => props.visible,
-        (v: boolean) => {
-          v &&
+        (visible: boolean) => {
+          visible &&
             nextTick(() => {
               unref(inputRef)?.focus();
             });

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

 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 { useGo } from '/@/hooks/web/usePage';
 import { useScrollTo } from '/@/hooks/event/useScrollTo';
 import { onKeyStroke, useDebounceFn } from '@vueuse/core';
@@ -67,7 +63,6 @@ export function useMenuSearch(refs: Ref<HTMLElement[]>, scrollWrap: Ref<ElRef>,
 
   function handlerSearchResult(filterMenu: Menu[], reg: RegExp, parent?: Menu) {
     const ret: SearchResult[] = [];
-
     filterMenu.forEach((item) => {
       const { name, path, icon, children } = item;
       if (reg.test(name) && !children?.length) {
@@ -84,11 +79,13 @@ export function useMenuSearch(refs: Ref<HTMLElement[]>, scrollWrap: Ref<ElRef>,
     return ret;
   }
 
+  // Activate when the mouse moves to a certain line
   function handleMouseenter(e: any) {
     const index = e.target.dataset.index;
     activeIndex.value = Number(index);
   }
 
+  // Arrow key up
   function handleUp() {
     if (!searchResult.value.length) return;
     activeIndex.value--;
@@ -98,6 +95,7 @@ export function useMenuSearch(refs: Ref<HTMLElement[]>, scrollWrap: Ref<ElRef>,
     handleScroll();
   }
 
+  // Arrow key down
   function handleDown() {
     if (!searchResult.value.length) return;
     activeIndex.value++;
@@ -107,15 +105,23 @@ export function useMenuSearch(refs: Ref<HTMLElement[]>, scrollWrap: Ref<ElRef>,
     handleScroll();
   }
 
+  // When the keyboard up and down keys move to an invisible place
+  // the scroll bar needs to scroll automatically
   function handleScroll() {
     const refList = unref(refs);
-    if (!refList || !Array.isArray(refList) || refList.length === 0 || !unref(scrollWrap)) return;
+    if (!refList || !Array.isArray(refList) || refList.length === 0 || !unref(scrollWrap)) {
+      return;
+    }
 
     const index = unref(activeIndex);
     const currentRef = refList[index];
-    if (!currentRef) return;
+    if (!currentRef) {
+      return;
+    }
     const wrapEl = unref(scrollWrap);
-    if (!wrapEl) return;
+    if (!wrapEl) {
+      return;
+    }
     const scrollHeight = currentRef.offsetTop + currentRef.offsetHeight;
     const wrapHeight = wrapEl.offsetHeight;
     const { start } = useScrollTo({
@@ -126,8 +132,11 @@ export function useMenuSearch(refs: Ref<HTMLElement[]>, scrollWrap: Ref<ElRef>,
     start();
   }
 
+  // enter keyboard event
   async function handleEnter() {
-    if (!searchResult.value.length) return;
+    if (!searchResult.value.length) {
+      return;
+    }
     const result = unref(searchResult);
     const index = unref(activeIndex);
     if (result.length === 0 || index < 0) {
@@ -139,14 +148,18 @@ export function useMenuSearch(refs: Ref<HTMLElement[]>, scrollWrap: Ref<ElRef>,
     go(to.path);
   }
 
+  // close search modal
   function handleClose() {
     searchResult.value = [];
     emit('close');
   }
 
+  // enter search
   onKeyStroke('Enter', handleEnter);
+  // Monitor keyboard arrow keys
   onKeyStroke('ArrowUp', handleUp);
   onKeyStroke('ArrowDown', handleDown);
+  // esc close
   onKeyStroke('Escape', handleClose);
 
   return { handleSearch, searchResult, keyword, activeIndex, handleMouseenter, handleEnter };

src/components/Application/src/useAppContext.ts

@@ -3,7 +3,6 @@ import { createContext, useContext } from '/@/hooks/core/useContext';
 
 export interface AppProviderContextProps {
   prefixCls: Ref<string>;
-
   isMobile: Ref<boolean>;
 }
 

src/components/Authority/index.ts

-import Authority from './src/Authority.vue';
+import { withInstall } from '/@/utils';
+import authority from './src/Authority.vue';
 
-export { Authority };
+export const Authority = withInstall(authority);

src/components/Authority/src/Authority.vue

@@ -4,11 +4,8 @@
 <script lang="ts">
   import type { PropType } from 'vue';
   import { defineComponent } from 'vue';
-
   import { RoleEnum } from '/@/enums/roleEnum';
-
   import { usePermission } from '/@/hooks/web/usePermission';
-
   import { getSlot } from '/@/utils/helper/tsxHelper';
 
   export default defineComponent({

src/components/Basic/index.ts

-import BasicArrow from './src/BasicArrow.vue';
-import BasicTitle from './src/BasicTitle.vue';
-import BasicHelp from './src/BasicHelp.vue';
+import { withInstall } from '/@/utils';
+import basicArrow from './src/BasicArrow.vue';
+import basicTitle from './src/BasicTitle.vue';
+import basicHelp from './src/BasicHelp.vue';
 
-export { BasicArrow, BasicTitle, BasicHelp };
+export const BasicArrow = withInstall(basicArrow);
+export const BasicTitle = withInstall(basicTitle);
+export const BasicHelp = withInstall(basicHelp);

src/components/Basic/src/BasicArrow.vue

@@ -9,41 +9,50 @@
 </template>
 <script lang="ts">
   import { defineComponent, computed } from 'vue';
-
+  import { Icon } from '/@/components/Icon';
   import { useDesign } from '/@/hooks/web/useDesign';
 
-  import { propTypes } from '/@/utils/propTypes';
-
-  import { Icon } from '/@/components/Icon';
+  const props = {
+    /**
+     * Arrow expand state
+     */
+    expand: { type: Boolean },
+    /**
+     * Arrow up by default
+     */
+    up: { type: Boolean },
+    /**
+     * Arrow down by default
+     */
+    down: { type: Boolean },
+    /**
+     * Cancel padding/margin for inline
+     */
+    inset: { type: Boolean },
+  };
 
   export default defineComponent({
     name: 'BasicArrow',
     components: { Icon },
-    props: {
-      expand: propTypes.bool,
-      top: propTypes.bool,
-      bottom: propTypes.bool,
-      inset: propTypes.bool,
-    },
+    props,
     setup(props) {
       const { prefixCls } = useDesign('basic-arrow');
 
+      // get component class
       const getClass = computed(() => {
-        const { expand, top, bottom, inset } = props;
+        const { expand, up, down, inset } = props;
         return [
           prefixCls,
           {
             [`${prefixCls}--active`]: expand,
-            top,
+            up,
             inset,
-            bottom,
+            down,
           },
         ];
       });
 
-      return {
-        getClass,
-      };
+      return { getClass };
     },
   });
 </script>
@@ -65,19 +74,19 @@
       line-height: 0px;
     }
 
-    &.top {
+    &.up {
       transform: rotate(-90deg);
     }
 
-    &.bottom {
+    &.down {
       transform: rotate(90deg);
     }
 
-    &.top.@{prefix-cls}--active {
+    &.up.@{prefix-cls}--active {
       transform: rotate(90deg);
     }
 
-    &.bottom.@{prefix-cls}--active {
+    &.down.@{prefix-cls}--active {
       transform: rotate(-90deg);
     }
   }

src/components/Basic/src/BasicHelp.vue

 <script lang="tsx">
   import type { CSSProperties, PropType } from 'vue';
   import { defineComponent, computed, unref } from 'vue';
-
   import { Tooltip } from 'ant-design-vue';
   import { InfoCircleOutlined } from '@ant-design/icons-vue';
-
   import { getPopupContainer } from '/@/utils';
   import { isString, isArray } from '/@/utils/is';
   import { getSlot } from '/@/utils/helper/tsxHelper';
-  import { propTypes } from '/@/utils/propTypes';
-
   import { useDesign } from '/@/hooks/web/useDesign';
 
+  const props = {
+    /**
+     * Help text max-width
+     * @default: 600px
+     */
+    maxWidth: { type: String, default: '600px' },
+    /**
+     * Whether to display the serial number
+     * @default: false
+     */
+    showIndex: { type: Boolean },
+    /**
+     * Help text font color
+     * @default: #ffffff
+     */
+    color: { type: String, default: '#ffffff' },
+    /**
+     * Help text font size
+     * @default: 14px
+     */
+    fontSize: { type: String, default: '14px' },
+    /**
+     * Help text list
+     */
+    placement: { type: String, default: 'right' },
+    /**
+     * Help text list
+     */
+    text: { type: [Array, String] as PropType<string[] | string> },
+  };
+
   export default defineComponent({
     name: 'BasicHelp',
     components: { Tooltip },
-    props: {
-      // max-width
-      maxWidth: propTypes.string.def('600px'),
-      // Whether to display the serial number
-      showIndex: propTypes.bool,
-      // color
-      color: propTypes.string.def('#ffffff'),
-      fontSize: propTypes.string.def('14px'),
-      placement: propTypes.string.def('right'),
-      absolute: propTypes.bool,
-      // Text list
-      text: {
-        type: [Array, String] as PropType<string[] | string>,
-      },
-      // 定位
-      position: {
-        type: [Object] as PropType<any>,
-        default: () => ({
-          position: 'absolute',
-          left: 0,
-          bottom: 0,
-        }),
-      },
-    },
+    props,
     setup(props, { slots }) {
       const { prefixCls } = useDesign('basic-help');
 
-      const getOverlayStyle = computed(
-        (): CSSProperties => {
-          return {
-            maxWidth: props.maxWidth,
-          };
-        }
-      );
-
-      const getWrapStyle = computed(
-        (): CSSProperties => {
-          return {
-            color: props.color,
-            fontSize: props.fontSize,
-          };
-        }
+      const getTooltipStyle = computed(
+        (): CSSProperties => ({ color: props.color, fontSize: props.fontSize })
       );
 
-      const getMainStyleRef = computed(() => {
-        return props.absolute ? props.position : {};
-      });
+      const getOverlayStyle = computed((): CSSProperties => ({ maxWidth: props.maxWidth }));
 
-      const renderTitle = () => {
-        const list = props.text;
+      function renderTitle() {
+        const textList = props.text;
 
-        if (isString(list)) {
-          return <p>{list}</p>;
+        if (isString(textList)) {
+          return <p>{textList}</p>;
         }
 
-        if (isArray(list)) {
-          return list.map((item, index) => {
+        if (isArray(textList)) {
+          return textList.map((text, index) => {
             return (
-              <p key={item}>
+              <p key={text}>
                 <>
                   {props.showIndex ? `${index + 1}. ` : ''}
-                  {item}
+                  {text}
                 </>
               </p>
             );
           });
         }
-
         return null;
-      };
+      }
 
       return () => {
         return (
           <Tooltip
-            title={<div style={unref(getWrapStyle)}>{renderTitle()}</div>}
             overlayClassName={`${prefixCls}__wrap`}
+            title={<div style={unref(getTooltipStyle)}>{renderTitle()}</div>}
             autoAdjustOverflow={true}
             overlayStyle={unref(getOverlayStyle)}
-            placement={props.placement as 'left'}
+            placement={props.placement as 'right'}
             getPopupContainer={() => getPopupContainer()}
           >
-            <span class={prefixCls} style={unref(getMainStyleRef)}>
-              {getSlot(slots) || <InfoCircleOutlined />}
-            </span>
+            <span class={prefixCls}>{getSlot(slots) || <InfoCircleOutlined />}</span>
           </Tooltip>
         );
       };

src/components/Basic/src/BasicTitle.vue

 <template>
   <span :class="getClass">
     <slot></slot>
-    <BasicHelp :class="`${prefixCls}__help`" v-if="helpMessage" :text="helpMessage" />
+    <BasicHelp :class="`${prefixCls}-help`" v-if="helpMessage" :text="helpMessage" />
   </span>
 </template>
 <script lang="ts">
   import type { PropType } from 'vue';
-
   import { defineComponent, computed } from 'vue';
   import BasicHelp from './BasicHelp.vue';
-
   import { useDesign } from '/@/hooks/web/useDesign';
 
-  import { propTypes } from '/@/utils/propTypes';
+  const props = {
+    /**
+     * Help text list or string
+     * @default: ''
+     */
+    helpMessage: {
+      type: [String, Array] as PropType<string | string[]>,
+      default: '',
+    },
+    /**
+     * Whether the color block on the left side of the title
+     * @default: false
+     */
+    span: { type: Boolean },
+    /**
+     * Whether to default the text, that is, not bold
+     * @default: false
+     */
+    normal: { type: Boolean },
+  };
 
   export default defineComponent({
     name: 'BasicTitle',
     components: { BasicHelp },
-    props: {
-      helpMessage: {
-        type: [String, Array] as PropType<string | string[]>,
-        default: '',
-      },
-      span: propTypes.bool,
-      normal: propTypes.bool.def(false),
-    },
+    props,
     setup(props, { slots }) {
       const { prefixCls } = useDesign('basic-title');
 
@@ -33,6 +43,7 @@
         { [`${prefixCls}-show-span`]: props.span && slots.default },
         { [`${prefixCls}-normal`]: props.normal },
       ]);
+
       return { prefixCls, getClass };
     },
   });
@@ -67,7 +78,7 @@
       content: '';
     }
 
-    &__help {
+    &-help {
       margin-left: 10px;
     }
   }

src/components/Button/index.ts

-import Button from './src/BasicButton.vue';
-import PopConfirmButton from './src/PopConfirmButton.vue';
+import { withInstall } from '/@/utils';
+import button from './src/BasicButton.vue';
+import popConfirmButton from './src/PopConfirmButton.vue';
 
-export { Button, PopConfirmButton };
+export const Button = withInstall(button);
+export const PopConfirmButton = withInstall(popConfirmButton);

src/components/Button/src/BasicButton.vue

@@ -13,11 +13,21 @@
   import { Icon } from '/@/components/Icon';
 
   const props = {
-    color: { type: String, validate: (v) => ['error', 'warning', 'success', ''].includes(v) },
+    color: { type: String, validator: (v) => ['error', 'warning', 'success', ''].includes(v) },
     loading: { type: Boolean },
     disabled: { type: Boolean },
+    /**
+     * Text before icon.
+     */
     preIcon: { type: String },
+    /**
+     * Text after icon.
+     */
     postIcon: { type: String },
+    /**
+     * preIcon and postIcon icon size.
+     * @default: 14
+     */
     iconSize: { type: Number, default: 14 },
     onClick: { type: Function as PropType<(...args) => any>, default: null },
   };

src/components/Button/src/PopConfirmButton.vue

 <script lang="ts">
   import { defineComponent, h, unref, computed } from 'vue';
-  import { Popconfirm } from 'ant-design-vue';
   import BasicButton from './BasicButton.vue';
+  import { Popconfirm } from 'ant-design-vue';
   import { extendSlots } from '/@/utils/helper/tsxHelper';
   import { omit } from 'lodash-es';
   import { useAttrs } from '/@/hooks/core/useAttrs';

src/components/ClickOutSide/index.ts

-import ClickOutSide from './src/ClickOutSide.vue';
+import { withInstall } from '/@/utils';
+import clickOutSide from './src/ClickOutSide.vue';
 
-export { ClickOutSide };
+export const ClickOutSide = withInstall(clickOutSide);

src/components/CodeEditor/index.ts

-import { install } from '/@/utils/install';
+import { withInstall } from '/@/utils';
 import codeEditor from './src/CodeEditor.vue';
 import jsonPreview from './src/json-preview/JsonPreview.vue';
 
-export const CodeEditor = install(codeEditor);
-export const JsonPreview = install(jsonPreview);
+export const CodeEditor = withInstall(codeEditor);
+export const JsonPreview = withInstall(jsonPreview);

src/components/CodeEditor/src/CodeEditor.vue

 <template>
   <div class="h-full">
-    <CodeMirrorEditor :value="getValue" @change="handleValueChange" :mode="mode" :readonly="readonly" />
+    <CodeMirrorEditor
+      :value="getValue"
+      @change="handleValueChange"
+      :mode="mode"
+      :readonly="readonly"
+    />
   </div>
 </template>
 <script lang="ts">
@@ -13,43 +18,34 @@
     html: 'htmlmixed',
     js: 'javascript',
   };
+
+  const props = {
+    value: { type: [Object, String] as PropType<Record<string, any> | string> },
+    mode: { type: String, default: MODE.JSON },
+    readonly: { type: Boolean },
+  };
+
   export default defineComponent({
     name: 'CodeEditor',
     components: { CodeMirrorEditor },
-    props: {
-      value: {
-        type: [Object, String],
-      },
-      mode: {
-        type: String,
-        default: MODE.JSON,
-      },
-      readonly: {
-        type: Boolean,
-        default: false,
-      },
-    },
+    props,
     emits: ['change'],
     setup(props, { emit }) {
       const getValue = computed(() => {
         const { value, mode } = props;
-
-        if (mode === MODE.JSON) {
-          return isString(value)
-            ? JSON.stringify(JSON.parse(value), null, 2)
-            : JSON.stringify(value, null, 2);
+        if (mode !== MODE.JSON) {
+          return value as string;
         }
-        return value;
+        return isString(value)
+          ? JSON.stringify(JSON.parse(value), null, 2)
+          : JSON.stringify(value, null, 2);
       });
 
       function handleValueChange(v) {
         emit('change', v);
       }
 
-      return {
-        handleValueChange,
-        getValue,
-      };
+      return { handleValueChange, getValue };
     },
   });
 </script>

src/components/CodeEditor/src/codemirror/CodeMirror.vue

@@ -15,31 +15,25 @@
   } from 'vue';
   import { useDebounceFn } from '@vueuse/core';
   import { useAppStore } from '/@/store/modules/app';
-
+  import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
   import CodeMirror from 'codemirror';
+  // css
   import './codemirror.css';
   import 'codemirror/theme/idea.css';
   import 'codemirror/theme/material-palenight.css';
-
   // modes
   import 'codemirror/mode/javascript/javascript';
   import 'codemirror/mode/css/css';
   import 'codemirror/mode/htmlmixed/htmlmixed';
+
+  const props = {
+    mode: { type: String, default: 'application/json' },
+    value: { type: String, default: '' },
+    readonly: { type: Boolean, default: false },
+  };
+
   export default defineComponent({
-    props: {
-      mode: {
-        type: String,
-        default: 'application/json',
-      },
-      value: {
-        type: String,
-        default: '',
-      },
-      readonly: {
-        type: Boolean,
-        default: false,
-      },
-    },
+    props,
     emits: ['change'],
     setup(props, { emit }) {
       const el = ref();
@@ -50,11 +44,11 @@
 
       watch(
         () => props.value,
-        async (v) => {
+        async (value) => {
           await nextTick();
           const oldValue = editor?.getValue();
-          if (v !== oldValue) {
-            editor?.setValue(v ? v : '');
+          if (value !== oldValue) {
+            editor?.setValue(value ? value : '');
           }
         },
         { flush: 'post' }
@@ -113,13 +107,13 @@
       onMounted(async () => {
         await nextTick();
         init();
-        window.addEventListener('resize', debounceRefresh);
+        useWindowSizeFn(debounceRefresh);
       });
 
       onUnmounted(() => {
-        window.removeEventListener('resize', debounceRefresh);
         editor = null;
       });
+
       return { el };
     },
   });

src/components/CodeEditor/src/codemirror/codemirror.css

@@ -12,20 +12,21 @@
   --qualifier: #ff6032;
   --important: var(--string);
 
+  position: relative;
   height: auto;
   height: 100%;
+  overflow: hidden;
   font-family: var(--font-code);
+  background: white;
   direction: ltr;
 }
 
 /* PADDING */
 
 .CodeMirror-lines {
+  min-height: 1px; /* prevents collapsing before first draw */
   padding: 4px 0; /* Vertical padding around content */
-}
-
-.CodeMirror pre {
-  padding: 0 4px; /* Horizontal padding of content */
+  cursor: text;
 }
 
 .CodeMirror-scrollbar-filler,
@@ -36,6 +37,11 @@
 /* GUTTER */
 
 .CodeMirror-gutters {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 3;
+  min-height: 100%;
   white-space: nowrap;
   background-color: transparent;
   border-right: 1px solid #ddd;
@@ -96,7 +102,9 @@
 /* CURSOR */
 
 .CodeMirror-cursor {
+  position: absolute;
   width: 0;
+  pointer-events: none;
   border-right: none;
   border-left: 1px solid black;
 }
@@ -132,37 +140,19 @@
   animation: blink 1.06s steps(1) infinite;
 }
 @-moz-keyframes blink {
-  0% {
-  }
-
   50% {
     background-color: transparent;
   }
-
-  100% {
-  }
 }
 @-webkit-keyframes blink {
-  0% {
-  }
-
   50% {
     background-color: transparent;
   }
-
-  100% {
-  }
 }
 @keyframes blink {
-  0% {
-  }
-
   50% {
     background-color: transparent;
   }
-
-  100% {
-  }
 }
 
 .cm-tab {
@@ -316,12 +306,6 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
 /* The rest of this file contains styles related to the mechanics of
    the editor. You probably shouldn't touch them. */
 
-.CodeMirror {
-  position: relative;
-  overflow: hidden;
-  background: white;
-}
-
 .CodeMirror-scroll {
   position: relative;
   height: 100%;
@@ -378,14 +362,6 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
   left: 0;
 }
 
-.CodeMirror-gutters {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 3;
-  min-height: 100%;
-}
-
 .CodeMirror-gutter {
   display: inline-block;
   height: 100%;
@@ -422,14 +398,10 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
   background-color: transparent;
 }
 
-.CodeMirror-lines {
-  min-height: 1px; /* prevents collapsing before first draw */
-  cursor: text;
-}
-
 .CodeMirror pre {
   position: relative;
   z-index: 2;
+  padding: 0 4px; /* Horizontal padding of content */
   margin: 0;
   overflow: visible;
   font-family: inherit;
@@ -497,11 +469,6 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
   visibility: hidden;
 }
 
-.CodeMirror-cursor {
-  position: absolute;
-  pointer-events: none;
-}
-
 .CodeMirror-measure pre {
   position: static;
 }

src/components/CodeEditor/src/json-preview/JsonPreview.vue

@@ -8,11 +8,7 @@
   import { defineComponent } from 'vue';
   export default defineComponent({
     name: 'JsonPreview',
-    components: {
-      VueJsonPretty,
-    },
-    props: {
-      data: Object,
-    },
+    components: { VueJsonPretty },
+    props: { data: Object },
   });
 </script>

src/components/Container/index.ts

-import CollapseContainer from './src/collapse/CollapseContainer.vue';
-import ScrollContainer from './src/ScrollContainer.vue';
-import LazyContainer from './src/LazyContainer.vue';
+import { withInstall } from '/@/utils';
+import collapseContainer from './src/collapse/CollapseContainer.vue';
+import scrollContainer from './src/ScrollContainer.vue';
+import lazyContainer from './src/LazyContainer.vue';
 
-export { CollapseContainer, ScrollContainer, LazyContainer };
-export * from './src/types';
+export const CollapseContainer = withInstall(collapseContainer);
+export const ScrollContainer = withInstall(scrollContainer);
+export const LazyContainer = withInstall(lazyContainer);
+
+export * from './src/typing';

src/components/Container/src/LazyContainer.vue

@@ -18,13 +18,10 @@
 </template>
 <script lang="ts">
   import type { PropType } from 'vue';
-
   import { defineComponent, reactive, onMounted, ref, toRef, toRefs } from 'vue';
-
   import { Skeleton } from 'ant-design-vue';
   import { useTimeoutFn } from '/@/hooks/core/useTimeout';
   import { useIntersectionObserver } from '/@/hooks/event/useIntersectionObserver';
-  import { propTypes } from '/@/utils/propTypes';
 
   interface State {
     isInit: boolean;
@@ -32,36 +29,47 @@
     intersectionObserverInstance: IntersectionObserver | null;
   }
 
+  const props = {
+    /**
+     * Waiting time, if the time is specified, whether visible or not, it will be automatically loaded after the specified time
+     */
+    timeout: { type: Number },
+    /**
+     * The viewport where the component is located.
+     * If the component is scrolling in the page container, the viewport is the container
+     */
+    viewport: {
+      type: (typeof window !== 'undefined' ? window.HTMLElement : Object) as PropType<HTMLElement>,
+      default: () => null,
+    },
+    /**
+     * Preload threshold, css unit
+     */
+    threshold: { type: String, default: '0px' },
+    /**
+     * The scroll direction of the viewport, vertical represents the vertical direction, horizontal represents the horizontal direction
+     */
+    direction: {
+      type: String,
+      default: 'vertical',
+      validator: (v) => ['vertical', 'horizontal'].includes(v),
+    },
+    /**
+     * The label name of the outer container that wraps the component
+     */
+    tag: { type: String, default: 'div' },
+    maxWaitingTime: { type: Number, default: 80 },
+    /**
+     * transition name
+     */
+    transitionName: { type: String, default: 'lazy-container' },
+  };
+
   export default defineComponent({
     name: 'LazyContainer',
     components: { Skeleton },
     inheritAttrs: false,
-    props: {
-      // Waiting time, if the time is specified, whether visible or not, it will be automatically loaded after the specified time
-      timeout: propTypes.number,
-
-      // The viewport where the component is located. If the component is scrolling in the page container, the viewport is the container
-      viewport: {
-        type: (typeof window !== 'undefined'
-          ? window.HTMLElement
-          : Object) as PropType<HTMLElement>,
-        default: () => null,
-      },
-
-      // Preload threshold, css unit
-      threshold: propTypes.string.def('0px'),
-
-      // The scroll direction of the viewport, vertical represents the vertical direction, horizontal represents the horizontal direction
-      direction: propTypes.oneOf(['vertical', 'horizontal']).def('vertical'),
-
-      // The label name of the outer container that wraps the component
-      tag: propTypes.string.def('div'),
-
-      maxWaitingTime: propTypes.number.def(80),
-
-      // transition name
-      transitionName: propTypes.string.def('lazy-container'),
-    },
+    props,
     emits: ['init'],
     setup(props, { emit }) {
       const elRef = ref();

src/components/Container/src/ScrollContainer.vue

@@ -7,7 +7,6 @@
 <script lang="ts">
   import { defineComponent, ref, unref, nextTick } from 'vue';
   import { Scrollbar, ScrollbarType } from '/@/components/Scrollbar';
-
   import { useScrollTo } from '/@/hooks/event/useScrollTo';
 
   export default defineComponent({
@@ -16,12 +15,14 @@
     setup() {
       const scrollbarRef = ref<Nullable<ScrollbarType>>(null);
 
+      /**
+       * Scroll to the specified position
+       */
       function scrollTo(to: number, duration = 500) {
         const scrollbar = unref(scrollbarRef);
         if (!scrollbar) {
           return;
         }
-
         nextTick(() => {
           const wrap = unref(scrollbar.wrap);
           if (!wrap) {
@@ -44,12 +45,14 @@
         return scrollbar.wrap;
       }
 
+      /**
+       * Scroll to the bottom
+       */
       function scrollBottom() {
         const scrollbar = unref(scrollbarRef);
         if (!scrollbar) {
           return;
         }
-
         nextTick(() => {
           const wrap = unref(scrollbar.wrap);
           if (!wrap) {

src/components/Container/src/collapse/CollapseContainer.vue

 <template>
   <div :class="prefixCls">
-    <CollapseHeader
-      v-bind="getBindValues"
-      :prefixCls="prefixCls"
-      :show="show"
-      @expand="handleExpand"
-    >
+    <CollapseHeader v-bind="$props" :prefixCls="prefixCls" :show="show" @expand="handleExpand">
       <template #title>
         <slot name="title"></slot>
       </template>
@@ -16,13 +11,12 @@
 
     <div class="p-2">
       <CollapseTransition :enable="canExpan">
-        <Skeleton v-if="loading" :active="active" />
+        <Skeleton v-if="loading" :active="loading" />
         <div :class="`${prefixCls}__body`" v-else v-show="show">
           <slot></slot>
         </div>
       </CollapseTransition>
     </div>
-
     <div :class="`${prefixCls}__footer`" v-if="$slots.footer">
       <slot name="footer"></slot>
     </div>
@@ -30,20 +24,41 @@
 </template>
 <script lang="ts">
   import type { PropType } from 'vue';
-
-  import { defineComponent, ref, computed } from 'vue';
-
+  import { defineComponent, ref } from 'vue';
   // component
   import { Skeleton } from 'ant-design-vue';
   import { CollapseTransition } from '/@/components/Transition';
   import CollapseHeader from './CollapseHeader.vue';
-
   import { triggerWindowResize } from '/@/utils/event';
   // hook
   import { useTimeoutFn } from '/@/hooks/core/useTimeout';
-  import { propTypes } from '/@/utils/propTypes';
   import { useDesign } from '/@/hooks/web/useDesign';
 
+  const props = {
+    title: { type: String, default: '' },
+    loading: { type: Boolean },
+    /**
+     *  Can it be expanded
+     */
+    canExpan: { type: Boolean, default: true },
+    /**
+     * Warm reminder on the right side of the title
+     */
+    helpMessage: {
+      type: [Array, String] as PropType<string[] | string>,
+      default: '',
+    },
+    /**
+     * Whether to trigger window.resize when expanding and contracting,
+     * Can adapt to tables and forms, when the form shrinks, the form triggers resize to adapt to the height
+     */
+    triggerWindowResize: { type: Boolean },
+    /**
+     * Delayed loading time
+     */
+    lazyTime: { type: Number, default: 0 },
+  };
+
   export default defineComponent({
     name: 'CollapseContainer',
     components: {
@@ -51,23 +66,7 @@
       CollapseHeader,
       CollapseTransition,
     },
-    props: {
-      title: propTypes.string.def(''),
-      // Can it be expanded
-      canExpan: propTypes.bool.def(true),
-      // Warm reminder on the right side of the title
-      helpMessage: {
-        type: [Array, String] as PropType<string[] | string>,
-        default: '',
-      },
-      // Whether to trigger window.resize when expanding and contracting,
-      // Can adapt to tables and forms, when the form shrinks, the form triggers resize to adapt to the height
-      triggerWindowResize: propTypes.bool,
-      loading: propTypes.bool.def(false),
-      active: propTypes.bool.def(true),
-      // Delayed loading time
-      lazyTime: propTypes.number.def(0),
-    },
+    props,
     setup(props) {
       const show = ref(true);
 
@@ -84,15 +83,10 @@
         }
       }
 
-      const getBindValues = computed((): any => {
-        return props;
-      });
-
       return {
         show,
         handleExpand,
         prefixCls,
-        getBindValues,
       };
     },
   });

src/components/Container/src/collapse/CollapseHeader.vue

@@ -8,28 +8,31 @@
         <slot name="title"></slot>
       </template>
     </BasicTitle>
-
     <div :class="`${prefixCls}__action`">
       <slot name="action"></slot>
-      <BasicArrow v-if="canExpan" top :expand="show" @click="$emit('expand')" />
+      <BasicArrow v-if="canExpan" up :expand="show" @click="$emit('expand')" />
     </div>
   </div>
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';
   import { BasicArrow, BasicTitle } from '/@/components/Basic';
-  import { propTypes } from '/@/utils/propTypes';
+
+  const props = {
+    prefixCls: { type: String },
+    helpMessage: {
+      type: [Array, String] as PropType<string[] | string>,
+      default: '',
+    },
+    title: { type: String },
+    show: { type: Boolean },
+    canExpan: { type: Boolean },
+  };
 
   export default defineComponent({
     components: { BasicArrow, BasicTitle },
     inheritAttrs: false,
-    props: {
-      prefixCls: propTypes.string,
-      helpMessage: propTypes.string,
-      title: propTypes.string,
-      show: propTypes.bool,
-      canExpan: propTypes.bool,
-    },
+    props,
     emits: ['expand'],
   });
 </script>

src/components/FlowChart/index.ts

-import { install } from '/@/utils/install';
+import { withInstall } from '/@/utils';
 import flowChart from './src/FlowChart.vue';
 
-export const FlowChart = install(flowChart);
+export const FlowChart = withInstall(flowChart);

src/components/Form/src/components/FormAction.vue

@@ -31,7 +31,7 @@
         v-if="showAdvancedButton && !hideAdvanceBtn"
       >
         {{ isAdvanced ? t('component.form.putAway') : t('component.form.unfold') }}
-        <BasicArrow class="ml-1" :expand="!isAdvanced" top />
+        <BasicArrow class="ml-1" :expand="!isAdvanced" up />
       </Button>
       <slot name="advanceAfter"></slot>
     </FormItem>
@@ -99,16 +99,14 @@
         return actionColOpt;
       });
 
-      const getResetBtnOptions = computed(
-        (): ButtonOptions => {
-          return Object.assign(
-            {
-              text: t('common.resetText'),
-            },
-            props.resetButtonOptions
-          );
-        }
-      );
+      const getResetBtnOptions = computed((): ButtonOptions => {
+        return Object.assign(
+          {
+            text: t('common.resetText'),
+          },
+          props.resetButtonOptions
+        );
+      });
 
       const getSubmitBtnOptions = computed(() => {
         return Object.assign(

src/utils/index.ts

 import type { RouteLocationNormalized, RouteRecordNormalized } from 'vue-router';
+import type { App, Plugin } from 'vue';
+
 import { unref } from 'vue';
 import { isObject } from '/@/utils/is';
 
@@ -76,3 +78,14 @@ export function getRawRoute(route: RouteLocationNormalized): RouteLocationNormal
       : undefined) as RouteRecordNormalized[],
   };
 }
+
+export const withInstall = <T>(component: T, alias?: string) => {
+  const comp = component as any;
+  comp.install = (app: App) => {
+    app.component(comp.name || comp.displayName, component);
+    if (alias) {
+      app.config.globalProperties[alias] = component;
+    }
+  };
+  return component as T & Plugin;
+};

src/utils/install.ts

-import { App, Plugin } from 'vue';
-
-export const install = <T>(component: T, alias?: string) => {
-  const C = component as any;
-  C.install = (app: App) => {
-    app.component(C.name, component);
-    if (alias) {
-      app.config.globalProperties[alias] = component;
-    }
-  };
-  return component as T & Plugin;
-};

src/views/sys/login/Login.vue

@@ -35,8 +35,7 @@
             class="
               my-auto
               mx-auto
-              xl:ml-20
-              xl:bg-transparent
+              xl:ml-20 xl:bg-transparent
               px-5
               py-8
               sm:px-8

types/module.d.ts

 declare module '*.vue' {
-  import { defineComponent } from 'vue';
-  const Component: ReturnType<typeof defineComponent>;
+  import { DefineComponent } from 'vue';
+  const Component: DefineComponent<{}, {}, any>;
   export default Component;
 }