perf: perf component

vben
1 parent 19011296
Showing 80 changed files with 528 additions and 630 deletions
CHANGELOG.zh_CN.md
README.md
package.json
src/components/Application/index.ts
src/components/Application/src/AppLocalePicker.vue
src/components/Application/src/AppLogo.vue
src/components/Basic/index.ts
src/components/Basic/src/BasicArrow.vue
src/components/Basic/src/BasicHelp.vue
src/components/Basic/src/BasicTitle.vue
src/components/Breadcrumb/index.ts
src/components/Breadcrumb/Breadcrumb.vue → src/components/Breadcrumb/src/Breadcrumb.vue
src/components/Breadcrumb/BreadcrumbItem.vue → src/components/Breadcrumb/src/BreadcrumbItem.vue
src/components/Button/index.ts
src/components/Button/index.vue → src/components/Button/src/BasicButton.vue
src/components/Button/types.ts
src/components/ClickOutSide/index.ts
src/components/ClickOutSide/index.vue → src/components/ClickOutSide/src/index.vue
src/components/Container/index.ts
src/components/Container/src/LazyContainer.vue
 ## Wip
+## (破坏性更新) Breaking changes
+
+- ClickOutSide 组件引入方式由 `import ClickOutSide from '/@/components/ClickOutSide/index.vue'`变更为`import { ClickOutSide } from '/@/components/ClickOutSide'`
+- Button 组件引入方式由 `import ClickOutSide from '/@/components/Button/index.vue'`变更为`import { Button } from '/@/components/Button'`
+- StrengthMeter 组件引入方式由 `import StrengthMeter from '/@/components/StrengthMeter'`变更为`import { StrengthMeter } from '/@/components/StrengthMeter'`
+- 除示例外加入全局国际化功能，支持中文与英文
+
 ### ✨ Refactor
 - 重构整体 layout。更改代码实现方式。代码更精简
 - 配置项重构
 - 移除 messageSetting 配置
+- BasicTitle 组件 `showSpan`=> `span`
 ### ✨ Features
 - 缓存可以配置是否加密,默认生产环境开启 Aes 加密
 - 新增标签页拖拽排序
-- 除示例外加入全局国际化功能，支持中文与英文
 ### 🎫 Chores
@@ -69,7 +69,7 @@
 ### 环境要求
 - `Node.js`: - 版本最好大于 `12.0.0`
-- `yarn` > `npm` > `cnpm`: - 包管理工具.
+- `yarn` : - 包管理工具.
 ### UI 框架
@@ -38,6 +38,7 @@
     "vue": "^3.0.3",
     "vue-i18n": "^9.0.0-beta.8",
     "vue-router": "^4.0.0-rc.5",
+    "vue-types": "^3.0.1",
     "vuex": "^4.0.0-rc.2",
     "vuex-module-decorators": "^1.0.1",
     "xlsx": "^0.16.9",
 import AppLocalePicker from './src/AppLocalePicker.vue';
-import AppPageFooter from './src/AppPageFooter.vue';
 import AppLogo from './src/AppLogo.vue';
 import { withInstall } from '../util';
-export { AppLocalePicker, AppPageFooter, AppLogo };
+export { AppLocalePicker, AppLogo };
-export default withInstall(AppLocalePicker, AppPageFooter, AppLogo);
+export default withInstall(AppLocalePicker, AppLogo);
@@ -23,18 +23,16 @@
   import { LocaleType } from '/@/locales/types';
+  import { propTypes } from '/@/utils/propTypes';
+
   export default defineComponent({
     name: 'AppLocalPicker',
     components: { GlobalOutlined, Dropdown },
     props: {
-      showText: {
-        type: Boolean,
-        default: true,
-      },
-      reload: {
-        type: Boolean,
-        default: false,
-      },
+      // Whether to display text
+      showText: propTypes.bool.def(true),
+      // Whether to refresh the interface when changing
+      reload: propTypes.bool,
     },
     setup(props) {
       const { localeList } = useLocaleSetting();
@@ -9,7 +9,6 @@
   </div>
 </template>
 <script lang="ts">
-  import type { PropType } from 'vue';
   import { defineComponent } from 'vue';
   import { useGlobSetting } from '/@/hooks/setting';
@@ -18,23 +17,23 @@
   import { PageEnum } from '/@/enums/pageEnum';
+  import { propTypes } from '/@/utils/propTypes';
+
   export default defineComponent({
     name: 'AppLogo',
     props: {
       /**
        * The theme of the current parent component
        */
-      theme: {
-        type: String as PropType<string>,
-      },
-      showTitle: {
-        type: Boolean,
-        default: true,
-      },
+      theme: propTypes.oneOf(['light', 'dark']),
+      // Whether to show title
+      showTitle: propTypes.bool.def(true),
     },
     setup() {
       const { getCollapsedShowTitle } = useMenuSetting();
+
       const globSetting = useGlobSetting();
+
       const go = useGo();
       function handleGoHome(): void {
-export { default as BasicArrow } from './src/BasicArrow.vue';
-export { default as BasicHelp } from './src/BasicHelp.vue';
-export { default as BasicTitle } from './src/BasicTitle.vue';
+import BasicArrow from './src/BasicArrow.vue';
+import BasicHelp from './src/BasicHelp.vue';
+import BasicTitle from './src/BasicTitle.vue';
+
+import { withInstall } from '../util';
+
+export { BasicArrow, BasicHelp, BasicTitle };
+
+export default withInstall(BasicArrow, BasicHelp, BasicTitle);
@@ -8,27 +8,30 @@
   </span>
 </template>
 <script lang="ts">
-  import type { PropType } from 'vue';
-
   import { defineComponent, computed } from 'vue';
   import { RightOutlined } from '@ant-design/icons-vue';
+  import { propTypes } from '/@/utils/propTypes';
   export default defineComponent({
     name: 'BasicArrow',
     components: { RightOutlined },
     props: {
       // Expand contract, expand by default
-      expand: {
-        type: Boolean as PropType<boolean>,
-        default: true,
-      },
+      expand: propTypes.bool,
+      top: propTypes.bool,
+      bottom: propTypes.bool,
     },
     setup(props) {
       const getClass = computed(() => {
-        const preCls = 'base-arrow';
-        const cls = [preCls];
-        props.expand && cls.push(`${preCls}__active`);
-        return cls;
+        const { expand, top, bottom } = props;
+        return [
+          'base-arrow',
+          {
+            'base-arrow__active': expand,
+            top,
+            bottom,
+          },
+        ];
       });
       return {
@@ -39,26 +42,29 @@
 </script>
 <style lang="less" scoped>
   .base-arrow {
-    transform: rotate(-90deg);
+    display: inline-block;
+    transform: rotate(0deg);
     transition: all 0.3s ease 0.1s;
     transform-origin: center center;
-    &.right {
-      transform: rotate(0deg);
+    &__active {
+      transform: rotate(90deg);
+    }
+
+    &.top {
+      transform: rotate(-90deg);
+    }
-      > span {
-        transition: all 0.3s ease 0.1s !important;
-      }
+    &.bottom {
+      transform: rotate(90deg);
     }
-    &__active {
+    &.top.base-arrow__active {
       transform: rotate(90deg);
     }
-    &.right.base-arrow__active {
-      span {
-        transform: rotate(90deg);
-      }
+    &.bottom.base-arrow__active {
+      transform: rotate(-90deg);
     }
   }
 </style>
 <script lang="ts">
-  import type { PropType } from 'vue';
+  import type { CSSProperties, PropType } from 'vue';
   import { defineComponent, computed, unref, h } from 'vue';
   import { Tooltip } from 'ant-design-vue';
@@ -8,37 +8,24 @@
   import { getPopupContainer } from '/@/utils';
   import { isString, isArray } from '/@/utils/is';
   import { getSlot } from '/@/utils/helper/tsxHelper';
+  import { propTypes } from '/@/utils/propTypes';
   export default defineComponent({
     name: 'BasicHelp',
     components: { Tooltip },
     props: {
       // max-width
-      maxWidth: {
-        type: String as PropType<string>,
-        default: '600px',
-      },
+      maxWidth: propTypes.string.def('600px'),
       // Whether to display the serial number
-      showIndex: {
-        type: Boolean as PropType<boolean>,
-        default: false,
-      },
+      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>,
       },
-      // color
-      color: {
-        type: String as PropType<string>,
-        default: '#ffffff',
-      },
-      fontSize: {
-        type: String as PropType<string>,
-        default: '14px',
-      },
-      absolute: {
-        type: Boolean as PropType<boolean>,
-        default: false,
-      },
       // 定位
       position: {
         type: [Object] as PropType<any>,
@@ -48,24 +35,24 @@
           bottom: 0,
         }),
       },
-      placement: {
-        type: String as PropType<string>,
-        defualt: 'right',
-      },
     },
     setup(props, { slots }) {
-      const getOverlayStyleRef = computed(() => {
-        return {
-          maxWidth: props.maxWidth,
-        };
-      });
+      const getOverlayStyleRef = computed(
+        (): CSSProperties => {
+          return {
+            maxWidth: props.maxWidth,
+          };
+        }
+      );
-      const getWrapStyleRef = computed(() => {
-        return {
-          color: props.color,
-          fontSize: props.fontSize,
-        };
-      });
+      const getWrapStyleRef = computed(
+        (): CSSProperties => {
+          return {
+            color: props.color,
+            fontSize: props.fontSize,
+          };
+        }
+      );
       const getMainStyleRef = computed(() => {
         return props.absolute ? props.position : {};
@@ -73,14 +60,17 @@
       const renderTitle = () => {
         const list = props.text;
+
         if (isString(list)) {
           return h('p', list);
         }
+
         if (isArray(list)) {
           return list.map((item, index) => {
             return h('p', { key: item }, [props.showIndex ? `${index + 1}. ` : '', item]);
           });
         }
+
         return null;
       };
@@ -95,7 +85,7 @@
                 style: unref(getWrapStyleRef),
               },
               [renderTitle()]
-            ) as any,
+            ),
             overlayClassName: 'base-help__wrap',
             autoAdjustOverflow: true,
             overlayStyle: unref(getOverlayStyleRef),
 <template>
-  <span class="base-title" :class="{ 'show-span': showSpan && $slots.default }">
+  <span class="base-title" :class="{ 'show-span': span && $slots.default }">
     <slot />
     <BasicHelp class="base-title__help" v-if="helpMessage" :text="helpMessage" />
   </span>
@@ -10,6 +10,7 @@
   import { defineComponent } from 'vue';
   import BasicHelp from './BasicHelp.vue';
+  import { propTypes } from '/@/utils/propTypes';
   export default defineComponent({
     name: 'BasicTitle',
@@ -19,13 +20,7 @@
         type: [String, Array] as PropType<string | string[]>,
         default: '',
       },
-      showSpan: {
-        type: Boolean as PropType<boolean>,
-        default: false,
-      },
-    },
-    setup() {
-      return {};
+      span: propTypes.bool,
     },
   });
 </script>
+import Breadcrumb from './src/Breadcrumb.vue';
+import BreadcrumbItem from './src/BreadcrumbItem.vue';
+import { withInstall } from '../util';
+
+export { Breadcrumb, BreadcrumbItem };
+
+export default withInstall(Breadcrumb, BreadcrumbItem);
@@ -5,20 +5,14 @@
 </template>
 <script lang="ts">
-  import type { PropType } from 'vue';
   import { defineComponent, provide, ref } from 'vue';
+  import { propTypes } from '/@/utils/propTypes';
   export default defineComponent({
     name: 'Breadcrumb',
     props: {
-      separator: {
-        type: String as PropType<string>,
-        default: '/',
-      },
-      separatorClass: {
-        type: String as PropType<string>,
-        default: '',
-      },
+      separator: propTypes.string.def('/'),
+      separatorClass: propTypes.string,
     },
     setup(props) {
       const breadcrumbRef = ref<Nullable<HTMLElement>>(null);
@@ -32,7 +26,7 @@
   });
 </script>
 <style lang="less">
-  @import (reference) '../../design/index.less';
+  @import (reference) '../../../design/index.less';
   .breadcrumb {
     .unselect();
@@ -13,21 +13,14 @@
   import { useRouter } from 'vue-router';
   import { useEventListener } from '/@/hooks/event/useEventListener';
+  import { propTypes } from '/@/utils/propTypes';
+
   export default defineComponent({
     name: 'BreadcrumbItem',
     props: {
-      to: {
-        type: [String, Object],
-        default: '',
-      },
-      replace: {
-        type: Boolean,
-        default: false,
-      },
-      isLink: {
-        type: Boolean,
-        default: false,
-      },
+      to: propTypes.oneOfType([propTypes.string, propTypes.object]),
+      replace: propTypes.bool,
+      isLink: propTypes.bool,
     },
     setup(props) {
       const linkRef = ref<Nullable<HTMLElement>>(null);
+import Button from './src/BasicButton.vue';
+import { withInstall } from '../util';
+
+export { Button };
+
+export default withInstall(Button);
@@ -8,51 +8,33 @@
   </Button>
 </template>
 <script lang="ts">
-  import { PropType } from 'vue';
-
   import { defineComponent, computed } from 'vue';
+
   import { Button } from 'ant-design-vue';
   import Icon from '/@/components/Icon';
+  import { propTypes } from '/@/utils/propTypes';
+
   export default defineComponent({
     name: 'AButton',
     inheritAttrs: false,
     components: { Button, Icon },
     props: {
-      type: {
-        type: String as PropType<'primary' | 'default' | 'danger' | 'dashed' | 'link'>,
-        default: 'default',
-      },
-      color: {
-        type: String as PropType<'error' | 'warning' | 'success' | ''>,
-      },
-      loading: {
-        type: Boolean as PropType<boolean>,
-        default: false,
-      },
-      disabled: {
-        type: Boolean as PropType<boolean>,
-        default: false,
-      },
-      preIcon: {
-        type: String as PropType<string>,
-      },
-      postIcon: {
-        type: String as PropType<string>,
-      },
+      type: propTypes.oneOf(['primary', 'default', 'danger', 'dashed', 'link']).def('default'),
+      color: propTypes.oneOf(['error', 'warning', 'success', '']),
+      loading: propTypes.bool,
+      disabled: propTypes.bool,
+      preIcon: propTypes.string,
+      postIcon: propTypes.string,
     },
     setup(props, { attrs }) {
-      const getIsCircleBtn = computed(() => {
-        return attrs.shape === 'circle';
-      });
+      const getIsCircleBtn = computed(() => attrs.shape === 'circle');
       const getColor = computed(() => {
         const { color, disabled } = props;
-        return [
-          {
-            [`ant-btn-${color}`]: !!color,
-            [`is-disabled`]: disabled,
-          },
-        ];
+        return {
+          [`ant-btn-${color}`]: !!color,
+          [`is-disabled`]: disabled,
+        };
       });
       const getBindValue = computed((): any => {
-import { VNodeChild } from 'vue';
-
-export interface BasicButtonProps {
-  /**
-   * can be set to primary ghost dashed danger(added in 2.7) or omitted (meaning default)
-   * @default 'default'
-   * @type string
-   */
-  type?: 'primary' | 'danger' | 'dashed' | 'ghost' | 'default';
-
-  /**
-   * set the original html type of button
-   * @default 'button'
-   * @type string
-   */
-  htmlType?: 'button' | 'submit' | 'reset' | 'menu';
-
-  /**
-   * set the icon of button
-   * @type string
-   */
-  icon?: VNodeChild | JSX.Element;
-
-  /**
-   * can be set to circle or circle-outline or omitted
-   * @type string
-   */
-  shape?: 'circle' | 'circle-outline';
-
-  /**
-   * can be set to small large or omitted
-   * @default 'default'
-   * @type string
-   */
-  size?: 'small' | 'large' | 'default';
-
-  /**
-   * set the loading status of button
-   * @default false
-   * @type boolean | { delay: number }
-   */
-  loading?: boolean | { delay: number };
-
-  /**
-   * disabled state of button
-   * @default false
-   * @type boolean
-   */
-  disabled?: boolean;
-
-  /**
-   * make background transparent and invert text and border colors, added in 2.7
-   * @default false
-   * @type boolean
-   */
-  ghost?: boolean;
-
-  /**
-   * option to fit button width to its parent width
-   * @default false
-   * @type boolean
-   */
-  block?: boolean;
-
-  onClick?: (e?: Event) => void;
-}
+import ClickOutSide from './src/index.vue';
+import { withInstall } from '../util';
+
+export { ClickOutSide };
+
+export default withInstall(ClickOutSide);
@@ -9,9 +9,8 @@
   export default defineComponent({
     name: 'ClickOutSide',
-
     setup(_, { emit }) {
-      const wrapRef = ref<Nullable<HTMLDivElement | null>>(null);
+      const wrapRef = ref<ElRef>(null);
       useClickOutside(wrapRef as Ref<HTMLDivElement>, () => {
         emit('clickOutside');
-export { default as ScrollContainer } from './src/ScrollContainer.vue';
-export { default as CollapseContainer } from './src/collapse/CollapseContainer.vue';
-export { default as LazyContainer } from './src/LazyContainer.vue';
+import ScrollContainer from './src/ScrollContainer.vue';
+import CollapseContainer from './src/collapse/CollapseContainer.vue';
+import LazyContainer from './src/LazyContainer.vue';
+import { withInstall } from '../util';
-export * from './src/types.d';
+export * from './src/types';
+
+export { ScrollContainer, CollapseContainer, LazyContainer };
+
+export default withInstall(ScrollContainer, CollapseContainer, LazyContainer);
@@ -24,19 +24,20 @@
   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;
     loading: boolean;
     intersectionObserverInstance: IntersectionObserver | null;
   }
+
   export default defineComponent({
     name: 'LazyContainer',
     components: { Skeleton },
     props: {
       // Waiting time, if the time is specified, whether visible or not, it will be automatically loaded after the specified time
-      timeout: {
-        type: Number as PropType<number>,
-      },
+      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: {
@@ -47,33 +48,18 @@
       },
       // Preload threshold, css unit
-      threshold: {
-        type: String as PropType<string>,
-        default: '0px',
-      },
+      threshold: propTypes.string.def('0px'),
       // The scroll direction of the viewport, vertical represents the vertical direction, horizontal represents the horizontal direction
-      direction: {
-        type: String as PropType<'vertical' | 'horizontal'>,
-        default: 'vertical',
-      },
+      direction: propTypes.oneOf(['vertical', 'horizontal']).def('vertical'),
       // The label name of the outer container that wraps the component
-      tag: {
-        type: String as PropType<string>,
-        default: 'div',
-      },
+      tag: propTypes.string.def('div'),
-      maxWaitingTime: {
-        type: Number as PropType<number>,
-        default: 80,
-      },
+      maxWaitingTime: propTypes.number.def(80),
       // transition name
-      transitionName: {
-        type: String as PropType<string>,
-        default: 'lazy-container',
-      },
+      transitionName: propTypes.string.def('lazy-container'),
     },
     emits: ['init'],
     setup(props, { emit }) {
@@ -10,11 +10,9 @@
 </template>
 <script lang="ts">
-  // component
   import { defineComponent, ref, unref, nextTick } from 'vue';
   import { Scrollbar } from '/@/components/Scrollbar';
-  // hook
   import { useScrollTo } from '/@/hooks/event/useScrollTo';
   export default defineComponent({
@@ -26,6 +24,7 @@
       function scrollTo(to: number, duration = 500) {
         const scrollbar = unref(scrollbarRef);
         if (!scrollbar) return;
+
         nextTick(() => {
           const { start } = useScrollTo({
             el: unref(scrollbar.$.wrap),
@@ -45,6 +44,7 @@
       function scrollBottom() {
         const scrollbar = unref(scrollbarRef);
         if (!scrollbar) return;
+
         nextTick(() => {
           const scrollHeight = scrollbar.$.wrap.scrollHeight as number;
           const { start } = useScrollTo({
@@ -54,6 +54,7 @@
           start();
         });
       }
+
       return {
         scrollbarRef,
         scrollTo,
@@ -5,6 +5,7 @@
         <slot name="title" />
       </template>
     </CollapseHeader>
+
     <CollapseTransition :enable="canExpan">
       <Skeleton v-if="loading" />
       <div class="collapse-container__body" v-else v-show="show">
@@ -22,36 +23,31 @@
 <script lang="ts">
   import type { PropType } from 'vue';
-  import { defineComponent, ref, unref } from 'vue';
+  import { defineComponent, ref } from 'vue';
+
   // component
+  import { Skeleton } from 'ant-design-vue';
   import { CollapseTransition } from '/@/components/Transition/index';
   import CollapseHeader from './CollapseHeader.vue';
-  import { Skeleton } from 'ant-design-vue';
-
   import LazyContainer from '../LazyContainer.vue';
   import { triggerWindowResize } from '/@/utils/event/triggerWindowResizeEvent';
   // hook
   import { useTimeoutFn } from '/@/hooks/core/useTimeout';
+  import { propTypes } from '/@/utils/propTypes';
   export default defineComponent({
+    name: 'CollapseContainer',
     components: {
       Skeleton,
       LazyContainer,
       CollapseHeader,
       CollapseTransition,
     },
-    name: 'CollapseContainer',
     props: {
-      title: {
-        type: String as PropType<string>,
-        default: '',
-      },
+      title: propTypes.string.def(''),
       // Can it be expanded
-      canExpan: {
-        type: Boolean as PropType<boolean>,
-        default: true,
-      },
+      canExpan: propTypes.bool.def(true),
       // Warm reminder on the right side of the title
       helpMessage: {
         type: [Array, String] as PropType<string[] | string>,
@@ -59,41 +55,27 @@
       },
       // 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 as PropType<boolean>,
-        default: false,
-      },
-      loading: {
-        type: Boolean as PropType<boolean>,
-        default: false,
-      },
+      triggerWindowResize: propTypes.bool,
+      loading: propTypes.bool,
       // Delayed loading
-      lazy: {
-        type: Boolean as PropType<boolean>,
-        default: false,
-      },
+      lazy: propTypes.bool,
       // Delayed loading time
-      lazyTime: {
-        type: Number as PropType<number>,
-        default: 0,
-      },
+      lazyTime: propTypes.number.def(0),
     },
     setup(props) {
-      const showRef = ref(true);
+      const show = ref(true);
       /**
        * @description: Handling development events
        */
       function handleExpand() {
-        const hasShow = !unref(showRef);
-        showRef.value = hasShow;
-
+        show.value = !show.value;
         if (props.triggerWindowResize) {
           // 200 milliseconds here is because the expansion has animation,
           useTimeoutFn(triggerWindowResize, 200);
         }
       }
       return {
-        show: showRef,
+        show,
         handleExpand,
       };
     },
@@ -11,7 +11,7 @@
     <div class="collapse-container__action">
       <slot name="action" />
-      <BasicArrow v-if="$attrs.canExpan" :expand="$attrs.show" @click="$emit('expand')" />
+      <BasicArrow v-if="$attrs.canExpan" top :expand="$attrs.show" @click="$emit('expand')" />
     </div>
   </div>
 </template>
 export { createContextMenu, destroyContextMenu } from './src/createContextMenu';
+
 export * from './src/types';
-import type { PropType, CSSProperties } from 'vue';
+import type { PropType } from 'vue';
 import type { Axis, ContextMenuItem } from './types';
+import { propTypes } from '/@/utils/propTypes';
 export const props = {
-  width: {
-    type: Number as PropType<number>,
-    default: 156,
-  },
+  width: propTypes.number.def(156),
   customEvent: {
     type: Object as PropType<Event>,
     default: null,
   },
-  styles: {
-    type: Object as PropType<CSSProperties>,
-    default: null,
-  },
-  showIcon: {
-    type: Boolean as PropType<boolean>,
-    default: true,
-  },
+  styles: propTypes.style,
+  showIcon: propTypes.bool.def(true),
   axis: {
     // The position of the right mouse button click
     type: Object as PropType<Axis>,
@@ -29,7 +29,7 @@ export interface ContextMenuProps {
 }
 export interface ItemContentProps {
-  showIcon: boolean;
+  showIcon: boolean | undefined;
   item: ContextMenuItem;
   handler: Fn;
 }
 // Transform vue-count-to to support vue3 version
-export { default as CountTo } from './src/index.vue';
+
+import CountTo from './src/index.vue';
+import { withInstall } from '../util';
+
+export { CountTo };
+
+export default withInstall(CountTo);
 import { PropType } from 'vue';
+import { propTypes } from '/@/utils/propTypes';
 export const countToProps = {
-  startVal: {
-    type: Number as PropType<number>,
-    required: false,
-    default: 0,
-  },
-  endVal: {
-    type: Number as PropType<number>,
-    required: false,
-    default: 2017,
-  },
-  duration: {
-    type: Number as PropType<number>,
-    required: false,
-    default: 3000,
-  },
-  autoplay: {
-    type: Boolean as PropType<boolean>,
-    required: false,
-    default: true,
-  },
+  startVal: propTypes.number.def(0),
+  endVal: propTypes.number.def(2020),
+  duration: propTypes.number.def(1300),
+  autoplay: propTypes.bool.def(true),
   decimals: {
     type: Number as PropType<number>,
     required: false,
@@ -28,31 +13,11 @@ export const countToProps = {
       return value >= 0;
     },
   },
-  decimal: {
-    type: String as PropType<string>,
-    required: false,
-    default: '.',
-  },
-  separator: {
-    type: String as PropType<string>,
-    required: false,
-    default: ',',
-  },
-  prefix: {
-    type: String as PropType<string>,
-    required: false,
-    default: '',
-  },
-  suffix: {
-    type: String as PropType<string>,
-    required: false,
-    default: '',
-  },
-  useEasing: {
-    type: Boolean as PropType<boolean>,
-    required: false,
-    default: true,
-  },
+  decimal: propTypes.string.def('.'),
+  separator: propTypes.string.def(','),
+  prefix: propTypes.string.def(''),
+  suffix: propTypes.string.def(''),
+  useEasing: propTypes.bool.def(true),
   easingFn: {
     type: Function as PropType<(t: number, b: number, c: number, d: number) => number>,
     default(t: number, b: number, c: number, d: number) {
-import { defineComponent, computed, ref, unref } from 'vue';
+import type { DescOptions, DescInstance, DescItem } from './types';
+
+import { defineComponent, computed, ref, unref, CSSProperties } from 'vue';
 import { Descriptions } from 'ant-design-vue';
 import { CollapseContainer, CollapseContainerOptions } from '/@/components/Container/index';
-import type { DescOptions, DescInstance, DescItem } from './types';
 import descProps from './props';
 import { isFunction } from '/@/utils/is';
@@ -11,6 +12,7 @@ import { deepMerge } from &#39;/@/utils&#39;;
 const prefixCls = 'description';
 export default defineComponent({
+  name: 'Description',
   props: descProps,
   emits: ['register'],
   setup(props, { attrs, slots, emit }) {
@@ -72,17 +74,13 @@ export default defineComponent({
       if (!labelStyle && !labelMinWidth) {
         return label;
       }
-      return (
-        <div
-          style={{
-            ...labelStyle,
-            minWidth: `${labelMinWidth}px`,
-          }}
-        >
-          {label}
-        </div>
-      );
+      const labelStyles: CSSProperties = {
+        ...labelStyle,
+
+        minWidth: `${labelMinWidth}px `,
+      };
+      return <div style={labelStyles}>{label}</div>;
     }
     function renderItem() {
@@ -90,9 +88,11 @@ export default defineComponent({
       return unref(schema).map((item) => {
         const { render, field, span, show, contentMinWidth } = item;
         const { data } = unref(getProps) as any;
+
         if (show && isFunction(show) && !show(data)) {
           return null;
         }
+
         const getContent = () =>
           isFunction(render)
             ? render(data && data[field], data)
@@ -130,12 +130,9 @@ export default defineComponent({
     const renderContainer = () => {
       const content = props.useCollapse ? renderDesc() : <div>{renderDesc()}</div>;
       // Reduce the dom level
+      const { title, canExpand, helpMessage } = unref(getCollapseOptions);
       return props.useCollapse ? (
-        <CollapseContainer
-          title={unref(getMergeProps).title}
-          canExpan={unref(getCollapseOptions).canExpand}
-          helpMessage={unref(getCollapseOptions).helpMessage}
-        >
+        <CollapseContainer title={title} canExpan={canExpand} helpMessage={helpMessage}>
           {{
             default: () => content,
             action: () => getSlot(slots, 'action'),
 import type { PropType } from 'vue';
+import type { CollapseContainerOptions } from '/@/components/Container';
 import type { DescItem } from './types';
+import { propTypes } from '/@/utils/propTypes';
 export default {
-  useCollapse: {
-    type: Boolean as PropType<boolean>,
-    default: true,
-  },
-  title: {
-    type: String as PropType<string>,
-    default: '',
-  },
-  size: {
-    type: String as PropType<'small' | 'default' | 'middle' | undefined>,
-    default: 'small',
-  },
-  bordered: {
-    type: Boolean as PropType<boolean>,
-    default: true,
-  },
+  useCollapse: propTypes.bool.def(true),
+  title: propTypes.string.def(''),
+  size: propTypes.oneOf(['small', 'default', 'middle', undefined]).def('small'),
+  bordered: propTypes.bool.def(true),
   column: {
     type: [Number, Object] as PropType<number | any>,
     default: () => {
@@ -25,15 +15,12 @@ export default {
     },
   },
   collapseOptions: {
-    type: Object as PropType<any>,
+    type: Object as PropType<CollapseContainerOptions>,
     default: null,
   },
   schema: {
     type: Array as PropType<Array<DescItem>>,
     default: () => [],
   },
-  data: {
-    type: Object as PropType<any>,
-    default: null,
-  },
+  data: propTypes.object,
 };
@@ -88,6 +88,7 @@ export interface DescInstance {
 }
 export type Register = (descInstance: DescInstance) => void;
+
 /**
  * @description:
  */
@@ -7,13 +7,11 @@ export function useDescription(props?: Partial&lt;DescOptions&gt;): UseDescReturnType 
   if (!getCurrentInstance()) {
     throw new Error('Please put useDescription function in the setup function!');
   }
-  const descRef = ref<DescInstance | null>(null);
+  const descRef = ref<Nullable<DescInstance>>(null);
   const loadedRef = ref(false);
   function register(instance: DescInstance) {
-    if (unref(loadedRef) && isProdMode()) {
-      return;
-    }
+    if (unref(loadedRef) && isProdMode()) return;
     descRef.value = instance;
     props && instance.setDescProps(props);
     loadedRef.value = true;
@@ -24,5 +22,6 @@ export function useDescription(props?: Partial&lt;DescOptions&gt;): UseDescReturnType 
       unref(descRef)!.setDescProps(descProps);
     },
   };
+
   return [register, methods];
 }
-export { default as Dropdown } from './src/Dropdown';
+import Dropdown from './src/Dropdown';
+import { withInstall } from '../util';
+
 export * from './src/types';
+
+export { Dropdown };
+export default withInstall(Dropdown);
@@ -2,7 +2,6 @@ import type { Trigger } from &#39;./types&#39;;
 import { defineComponent, computed, unref } from 'vue';
 import { Dropdown, Menu } from 'ant-design-vue';
-
 import Icon from '/@/components/Icon/index';
 import { basicDropdownProps } from './props';
-export { default as ImportExcel } from './src/ImportExcel.vue';
-export { default as ExportExcelModel } from './src/ExportExcelModel.vue';
+import ImportExcel from './src/ImportExcel.vue';
+import ExportExcelModel from './src/ExportExcelModel.vue';
-export { jsonToSheetXlsx, aoaToSheetXlsx } from './src/Export2Excel';
+import { withInstall } from '../util';
 export * from './src/types';
+
+export { jsonToSheetXlsx, aoaToSheetXlsx } from './src/Export2Excel';
+
+export { ImportExcel, ExportExcelModel };
+
+export default withInstall(ImportExcel, ExportExcelModel);
 import xlsx from 'xlsx';
 import type { WorkBook } from 'xlsx';
 import type { JsonToSheet, AoAToSheet } from './types';
-// import { isObject } from '@/src/utils/is';
 const { utils, writeFile } = xlsx;
+const DEF_FILE_NAME = 'excel-list.xlsx';
 export function jsonToSheetXlsx<T = any>({
   data,
   header,
-  filename = 'excel-list.xlsx',
+  filename = DEF_FILE_NAME,
   json2sheetOpts = {},
   write2excelOpts = { bookType: 'xlsx' },
 }: JsonToSheet<T>) {
@@ -34,7 +34,7 @@ export function jsonToSheetXlsx&lt;T = any&gt;({
 export function aoaToSheetXlsx<T = any>({
   data,
   header,
-  filename = 'excel-list.xlsx',
+  filename = DEF_FILE_NAME,
   write2excelOpts = { bookType: 'xlsx' },
 }: AoAToSheet<T>) {
   const arrData = [...data];
@@ -72,7 +72,6 @@
       async function handleOk() {
         const res = (await validateFields()) as ExportModalResult;
         const { filename, bookType } = res;
-
         emit('success', {
           filename: `${filename.split('.').shift()}.${bookType}`,
           bookType,
@@ -2,7 +2,7 @@ import type { ColEx } from &#39;./types/index&#39;;
 import { defineComponent, unref, computed, PropType } from 'vue';
 import { Form, Col } from 'ant-design-vue';
-import Button from '/@/components/Button/index.vue';
+import { Button } from '/@/components/Button';
 import { BasicArrow } from '/@/components/Basic/index';
 import { getSlot } from '/@/utils/helper/tsxHelper';
@@ -12,7 +12,6 @@ const { t } = useI18n(&#39;component.form&#39;);
 export default defineComponent({
   name: 'BasicFormAction',
-  emits: ['toggle-advanced'],
   props: {
     show: {
       type: Boolean,
@@ -55,6 +54,7 @@ export default defineComponent({
       default: false,
     },
   },
+  emits: ['toggle-advanced'],
   setup(props, { slots, emit }) {
     const getResetBtnOptionsRef = computed(() => {
       return {
@@ -112,7 +112,7 @@ export default defineComponent({
                       {() => (
                         <>
                           {isAdvanced ? t('putAway') : t('unfold')}
-                          <BasicArrow expand={!isAdvanced} />
+                          <BasicArrow expand={!isAdvanced} top />
                         </>
                       )}
                     </Button>
 import type { NamePath, RuleObject } from 'ant-design-vue/lib/form/interface';
 import type { VNode } from 'vue';
-import type { BasicButtonProps } from '/@/components/Button/types';
+import type { ButtonProps as AntdButtonProps } from 'ant-design-vue/es/button/buttonTypes';
+
 import type { FormItem } from './formItem';
 import type { ColEx, ComponentType } from './index';
-import { TableActionType } from '../../../Table/src/types/table';
+import type { TableActionType } from '/@/components/Table/src/types/table';
 export type FieldMapToTime = [string, [string, string], string?][];
@@ -18,7 +19,7 @@ export interface RenderCallbackParams {
   field: string;
 }
-export interface ButtonProps extends BasicButtonProps {
+export interface ButtonProps extends AntdButtonProps {
   text?: string;
 }
+import './index.less';
+
 import type { PropType } from 'vue';
-import { defineComponent, ref, watch, onMounted, nextTick, unref, computed } from 'vue';
+import {
+  defineComponent,
+  ref,
+  watch,
+  onMounted,
+  nextTick,
+  unref,
+  computed,
+  CSSProperties,
+} from 'vue';
 import Iconify from '@purge-icons/generated';
 import { isString } from '/@/utils/is';
-import './index.less';
+import { propTypes } from '/@/utils/propTypes';
 export default defineComponent({
   name: 'GIcon',
   props: {
     // icon name
-    icon: {
-      type: String as PropType<string>,
-      required: true,
-    },
+    icon: propTypes.string,
     // icon color
-    color: {
-      type: String as PropType<string>,
-    },
+    color: propTypes.string,
     // icon size
     size: {
       type: [String, Number] as PropType<string | number>,
       default: 16,
     },
-    prefix: {
-      type: String as PropType<string>,
-      default: '',
-    },
+    prefix: propTypes.string.def(''),
   },
   setup(props, { attrs }) {
-    const elRef = ref<Nullable<HTMLElement>>(null);
+    const elRef = ref<ElRef>(null);
     const getIconRef = computed(() => {
       const { icon, prefix } = props;
@@ -54,18 +57,20 @@ export default defineComponent({
       }
     };
-    const wrapStyleRef = computed((): any => {
-      const { size, color } = props;
-      let fs = size;
-      if (isString(size)) {
-        fs = parseInt(size, 10);
+    const wrapStyleRef = computed(
+      (): CSSProperties => {
+        const { size, color } = props;
+        let fs = size;
+        if (isString(size)) {
+          fs = parseInt(size, 10);
+        }
+        return {
+          fontSize: `${fs}px`,
+          color,
+          display: 'inline-flex',
+        };
       }
-      return {
-        fontSize: `${fs}px`,
-        color,
-        display: 'inline-flex',
-      };
-    });
+    );
     watch(() => props.icon, update, { flush: 'post' });
-export { default as MarkDown } from './src/index.vue';
+import MarkDown from './src/index.vue';
+
+import { withInstall } from '../util';
 export * from './src/types';
+export { MarkDown };
+export default withInstall(MarkDown);
@@ -2,39 +2,27 @@
   <div class="markdown" ref="wrapRef" />
 </template>
 <script lang="ts">
-  import {
-    defineComponent,
-    ref,
-    onMounted,
-    unref,
-    PropType,
-    onUnmounted,
-    nextTick,
-    watchEffect,
-  } from 'vue';
+  import { defineComponent, ref, onMounted, unref, onUnmounted, nextTick, watchEffect } from 'vue';
   import Vditor from 'vditor';
   import 'vditor/dist/index.css';
+
+  import { propTypes } from '/@/utils/propTypes';
+
   export default defineComponent({
     emits: ['update:value'],
     props: {
-      height: {
-        type: Number as PropType<number>,
-        default: 360,
-      },
-      value: {
-        type: String,
-        default: '',
-      },
+      height: propTypes.number.def(360),
+      value: propTypes.string.def(''),
     },
     setup(props, { attrs, emit }) {
-      const wrapRef = ref<Nullable<HTMLDivElement>>(null);
+      const wrapRef = ref<ElRef>(null);
       const vditorRef = ref<Nullable<Vditor>>(null);
       const initedRef = ref(false);
       function init() {
         const wrapEl = unref(wrapRef);
         if (!wrapEl) return;
-        const data = { ...attrs, ...props };
+        const bindValue = { ...attrs, ...props };
         vditorRef.value = new Vditor(wrapEl, {
           mode: 'sv',
           preview: {
@@ -43,7 +31,7 @@
           input: (v) => {
             emit('update:value', v);
           },
-          ...data,
+          ...bindValue,
           cache: {
             enable: false,
           },
@@ -3,7 +3,7 @@ import type { ModalProps, ModalMethods } from &#39;./types&#39;;
 import { defineComponent, computed, ref, watch, unref, watchEffect } from 'vue';
 import Modal from './Modal';
-import Button from '/@/components/Button/index.vue';
+import { Button } from '/@/components/Button';
 import ModalWrapper from './ModalWrapper';
 import { BasicTitle } from '/@/components/Basic';
 import { FullscreenExitOutlined, FullscreenOutlined, CloseOutlined } from '@ant-design/icons-vue';
+import PageFooter from './src/PageFooter.vue';
+import { withInstall } from '../util';
+
+export { PageFooter };
+
+export default withInstall(PageFooter);
@@ -14,10 +14,9 @@
   import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
   export default defineComponent({
-    name: 'AppFooterToolbar',
+    name: 'PageFooter',
     setup() {
       const { getCalcContentWidth } = useMenuSetting();
-
       return { getCalcContentWidth };
     },
   });
-import { PropType } from 'vue';
+import StrengthMeter from './src/index';
+import { withInstall } from '../util';
-import { defineComponent, computed, ref, watch, unref, watchEffect } from 'vue';
+export { StrengthMeter };
-import { Input } from 'ant-design-vue';
-
-import zxcvbn from 'zxcvbn';
-import { extendSlots } from '/@/utils/helper/tsxHelper';
-
-import './index.less';
-const prefixCls = 'strength-meter';
-export default defineComponent({
-  name: 'StrengthMeter',
-  emits: ['score-change', 'change'],
-  props: {
-    value: {
-      type: String as PropType<string>,
-      default: undefined,
-    },
-
-    userInputs: {
-      type: Array as PropType<string[]>,
-      default: () => [],
-    },
-
-    showInput: {
-      type: Boolean as PropType<boolean>,
-      default: true,
-    },
-    disabled: {
-      type: Boolean as PropType<boolean>,
-      default: false,
-    },
-  },
-  setup(props, { emit, attrs, slots }) {
-    const innerValueRef = ref('');
-    const getPasswordStrength = computed(() => {
-      const { userInputs, disabled } = props;
-      if (disabled) return null;
-      const innerValue = unref(innerValueRef);
-      const score = innerValue
-        ? zxcvbn(unref(innerValueRef), (userInputs as string[]) || null).score
-        : null;
-      emit('score-change', score);
-      return score;
-    });
-
-    function handleChange(e: ChangeEvent) {
-      innerValueRef.value = e.target.value;
-    }
-
-    watchEffect(() => {
-      innerValueRef.value = props.value || '';
-    });
-    watch(
-      () => unref(innerValueRef),
-      (val) => {
-        emit('change', val);
-      }
-    );
-
-    return () => {
-      const { showInput, disabled } = props;
-      return (
-        <div class={prefixCls}>
-          {showInput && (
-            <Input.Password
-              {...attrs}
-              allowClear={true}
-              value={unref(innerValueRef)}
-              onChange={handleChange}
-              disabled={disabled}
-            >
-              {extendSlots(slots)}
-            </Input.Password>
-          )}
-          <div class={`${prefixCls}-bar`}>
-            <div class={`${prefixCls}-bar__fill`} data-score={unref(getPasswordStrength)}></div>
-          </div>
-        </div>
-      );
-    };
-  },
-});
+export default withInstall(StrengthMeter);
-@import (reference) '../../design/index.less';
+@import (reference) '../../../design/index.less';
 .strength-meter {
   position: relative;
+import './index.less';
+
+import { PropType } from 'vue';
+
+import { defineComponent, computed, ref, watch, unref, watchEffect } from 'vue';
+
+import { Input } from 'ant-design-vue';
+
+import zxcvbn from 'zxcvbn';
+import { extendSlots } from '/@/utils/helper/tsxHelper';
+import { propTypes } from '/@/utils/propTypes';
+
+const prefixCls = 'strength-meter';
+export default defineComponent({
+  name: 'StrengthMeter',
+  props: {
+    value: propTypes.string,
+
+    userInputs: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+    },
+
+    showInput: propTypes.bool.def(true),
+    disabled: propTypes.bool,
+  },
+  emits: ['score-change', 'change'],
+  setup(props, { emit, attrs, slots }) {
+    const innerValueRef = ref('');
+    const getPasswordStrength = computed(() => {
+      const { userInputs, disabled } = props;
+      if (disabled) return null;
+      const innerValue = unref(innerValueRef);
+      const score = innerValue
+        ? zxcvbn(unref(innerValueRef), (userInputs as string[]) || null).score
+        : null;
+      emit('score-change', score);
+      return score;
+    });
+
+    function handleChange(e: ChangeEvent) {
+      innerValueRef.value = e.target.value;
+    }
+
+    watchEffect(() => {
+      innerValueRef.value = props.value || '';
+    });
+    watch(
+      () => unref(innerValueRef),
+      (val) => {
+        emit('change', val);
+      }
+    );
+
+    return () => {
+      const { showInput, disabled } = props;
+      return (
+        <div class={prefixCls}>
+          {showInput && (
+            <Input.Password
+              {...attrs}
+              allowClear={true}
+              value={unref(innerValueRef)}
+              onChange={handleChange}
+              disabled={disabled}
+            >
+              {extendSlots(slots)}
+            </Input.Password>
+          )}
+          <div class={`${prefixCls}-bar`}>
+            <div class={`${prefixCls}-bar__fill`} data-score={unref(getPasswordStrength)}></div>
+          </div>
+        </div>
+      );
+    };
+  },
+});
@@ -3,7 +3,7 @@ import { Dropdown, Menu, Popconfirm } from &#39;ant-design-vue&#39;;
 import Icon from '/@/components/Icon/index';
 import { DownOutlined } from '@ant-design/icons-vue';
 import { ActionItem } from '/@/components/Table';
-import Button from '/@/components/Button/index.vue';
+import { Button } from '/@/components/Button';
 const prefixCls = 'basic-table-action';
 export default defineComponent({
   name: 'TableAction',
+import '../style/editable-cell.less';
+
 import { defineComponent, PropType, ref, unref, nextTick, watchEffect } from 'vue';
-import ClickOutSide from '/@/components/ClickOutSide/index.vue';
+import { ClickOutSide } from '/@/components/ClickOutSide';
 import { RenderEditableCellParams } from '../types/table';
 import { ComponentType } from '../types/componentType';
@@ -8,8 +10,6 @@ import { componentMap } from &#39;../componentMap&#39;;
 import { isString, isBoolean } from '/@/utils/is';
 import { FormOutlined, CloseOutlined, CheckOutlined } from '@ant-design/icons-vue';
-import '../style/editable-cell.less';
-
 const prefixCls = 'editable-cell';
 const EditableCell = defineComponent({
   name: 'EditableCell',
@@ -8,7 +8,6 @@ export default () =&gt; {
           props.onExpand(props.record, e);
         }}
         expand={props.expanded}
-        class="right"
       />
     );
   };
-export { default as Tinymce } from './src/Editor.vue';
+import Tinymce from './src/Editor.vue';
+import { withInstall } from '../util';
+
+export { Tinymce };
+export default withInstall(Tinymce);
@@ -8,7 +8,6 @@
   import {
     defineComponent,
     computed,
-    onMounted,
     nextTick,
     ref,
     unref,
@@ -24,6 +23,7 @@
   import { snowUuid } from '/@/utils/uuid';
   import { bindHandlers } from './helper';
   import lineHeight from './lineHeight';
+  import { onMountedOrActivated } from '/@/hooks/core/onMountedOrActivated';
   const CDN_URL = 'https://cdn.bootcdn.net/ajax/libs/tinymce/5.5.1';
@@ -91,8 +91,7 @@
           editor.setMode(attrs.disabled ? 'readonly' : 'design');
         }
       );
-
-      onMounted(() => {
+      onMountedOrActivated(() => {
         nextTick(() => {
           init();
         });
@@ -13,14 +13,6 @@ export function createSimpleTransition(name: string, origin = &#39;top center 0&#39;, mo
         type: Boolean as PropType<boolean>,
         default: false,
       },
-      // hideOnLeave: {
-      //   type: Boolean as PropType<boolean>,
-      //   default: false,
-      // },
-      // leaveAbsolute: {
-      //   type: Boolean as PropType<boolean>,
-      //   default: false,
-      // },
       mode: {
         type: String as PropType<Mode>,
         default: mode,
-export { default as BasicDragVerify } from './src/DragVerify';
-export { default as RotateDragVerify } from './src/ImgRotate';
+import BasicDragVerify from './src/DragVerify';
+import RotateDragVerify from './src/ImgRotate';
+import { withInstall } from '../util';
 export * from './src/types';
+
+export { RotateDragVerify, BasicDragVerify };
+
+export default withInstall(RotateDragVerify, BasicDragVerify);
-export { default as VirtualScroll } from './src/index';
+import VirtualScroll from './src/index';
+import { withInstall } from '../util';
+
+export { VirtualScroll };
+
+export default withInstall(VirtualScroll);
-import { defineComponent, computed, ref, unref, reactive, onMounted, watch, nextTick } from 'vue';
+import {
+  defineComponent,
+  computed,
+  ref,
+  unref,
+  reactive,
+  onMounted,
+  watch,
+  nextTick,
+  CSSProperties,
+} from 'vue';
 import { useEventListener } from '/@/hooks/event/useEventListener';
 import { convertToUnit } from '/@/components/util';
@@ -34,29 +44,33 @@ export default defineComponent({
       return Math.min((props.items || []).length, state.last + unref(getBenchRef));
     });
-    const getContainerStyleRef = computed(() => {
-      return {
-        height: convertToUnit((props.items || []).length * unref(getItemHeightRef)),
-      };
-    });
+    const getContainerStyleRef = computed(
+      (): CSSProperties => {
+        return {
+          height: convertToUnit((props.items || []).length * unref(getItemHeightRef)),
+        };
+      }
+    );
-    const getWrapStyleRef = computed((): object => {
-      const styles: Record<string, string> = {};
-      const height = convertToUnit(props.height);
-      const minHeight = convertToUnit(props.minHeight);
-      const minWidth = convertToUnit(props.minWidth);
-      const maxHeight = convertToUnit(props.maxHeight);
-      const maxWidth = convertToUnit(props.maxWidth);
-      const width = convertToUnit(props.width);
-
-      if (height) styles.height = height;
-      if (minHeight) styles.minHeight = minHeight;
-      if (minWidth) styles.minWidth = minWidth;
-      if (maxHeight) styles.maxHeight = maxHeight;
-      if (maxWidth) styles.maxWidth = maxWidth;
-      if (width) styles.width = width;
-      return styles;
-    });
+    const getWrapStyleRef = computed(
+      (): CSSProperties => {
+        const styles: Record<string, string> = {};
+        const height = convertToUnit(props.height);
+        const minHeight = convertToUnit(props.minHeight);
+        const minWidth = convertToUnit(props.minWidth);
+        const maxHeight = convertToUnit(props.maxHeight);
+        const maxWidth = convertToUnit(props.maxWidth);
+        const width = convertToUnit(props.width);
+
+        if (height) styles.height = height;
+        if (minHeight) styles.minHeight = minHeight;
+        if (minWidth) styles.minWidth = minWidth;
+        if (maxHeight) styles.maxHeight = maxHeight;
+        if (maxWidth) styles.maxWidth = maxWidth;
+        if (width) styles.width = width;
+        return styles;
+      }
+    );
     watch([() => props.itemHeight, () => props.height], () => {
       onScroll();
 import Icon from './Icon/index';
-import Button from './Button/index.vue';
+import { Button } from './Button';
 import {
   // Need
   Button as AntButton,
@@ -6,6 +6,7 @@ export function withInstall(...components: Component[]) {
     components.forEach((comp) => {
       comp.name && app.component(comp.name, comp);
     });
+    return app;
   };
 }
-import type { PropType, FunctionalComponent } from 'vue';
+import type { FunctionalComponent } from 'vue';
 import { defineComponent, unref } from 'vue';
+
 import {
   DoubleRightOutlined,
   DoubleLeftOutlined,
@@ -9,6 +10,7 @@ import {
 } from '@ant-design/icons-vue';
 import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
+import { propTypes } from '/@/utils/propTypes';
 const SiderTrigger: FunctionalComponent = () => {
   const { getCollapsed } = useMenuSetting();
@@ -29,13 +31,8 @@ const HeaderTrigger: FunctionalComponent&lt;{
 export default defineComponent({
   name: 'LayoutTrigger',
   props: {
-    sider: {
-      type: Boolean as PropType<boolean>,
-      default: true,
-    },
-    theme: {
-      type: String as PropType<string>,
-    },
+    sider: propTypes.bool.def(true),
+    theme: propTypes.oneOf(['light', 'dark']),
   },
   setup(props) {
     return () => {
@@ -3,9 +3,9 @@ import type { RouteLocationMatched } from &#39;vue-router&#39;;
 import type { PropType } from 'vue';
 import { defineComponent, TransitionGroup, unref, watch, ref } from 'vue';
-import Breadcrumb from '/@/components/Breadcrumb/Breadcrumb.vue';
 import Icon from '/@/components/Icon';
-import BreadcrumbItem from '/@/components/Breadcrumb/BreadcrumbItem.vue';
+
+import { Breadcrumb, BreadcrumbItem } from '/@/components/Breadcrumb';
 import { useRouter } from 'vue-router';
@@ -38,6 +38,7 @@ import { PageEnum } from &#39;/@/enums/pageEnum&#39;;
 import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
 import { AppLocalePicker } from '/@/components/Application';
 import { useI18n } from '/@/hooks/web/useI18n';
+import { propTypes } from '/@/utils/propTypes';
 interface TooltipItemProps {
   title: string;
@@ -57,10 +58,7 @@ const TooltipItem: FunctionalComponent&lt;TooltipItemProps&gt; = (props, { slots }) =&gt;
 export default defineComponent({
   name: 'LayoutHeader',
   props: {
-    fixed: {
-      type: Boolean,
-      default: false,
-    },
+    fixed: propTypes.bool,
   },
   setup(props) {
     let logoEl: Element | null | undefined;
@@ -37,7 +37,7 @@
   export default defineComponent({
     props: {
       list: {
-        type: Array as PropType<Array<ListItem>>,
+        type: Array as PropType<ListItem[]>,
         default: () => [],
       },
     },
@@ -2,7 +2,7 @@ import &#39;./LockAction.less&#39;;
 import { defineComponent } from 'vue';
 import { BasicModal, useModalInner } from '/@/components/Modal/index';
-import Button from '/@/components/Button/index.vue';
+import { Button } from '/@/components/Button';
 import { BasicForm, useForm } from '/@/components/Form/index';
 import headerImg from '/@/assets/images/header.jpg';
@@ -15,32 +15,25 @@ import { useRootSetting } from &#39;/@/hooks/setting/useRootSetting&#39;;
 import { useGo } from '/@/hooks/web/usePage';
 import { useSplitMenu } from './useLayoutMenu';
 import { openWindow } from '/@/utils';
+import { propTypes } from '/@/utils/propTypes';
 export default defineComponent({
   name: 'LayoutMenu',
   props: {
-    theme: {
-      type: String as PropType<string>,
-      default: '',
-    },
+    theme: propTypes.oneOf(['light', 'dark']),
+
     splitType: {
       type: Number as PropType<MenuSplitTyeEnum>,
       default: MenuSplitTyeEnum.NONE,
     },
-    parentMenuPath: {
-      type: String as PropType<string>,
-      default: '',
-    },
-    showSearch: {
-      type: Boolean as PropType<boolean>,
-      default: true,
-    },
-    isHorizontal: {
-      type: Boolean as PropType<boolean>,
-      default: false,
-    },
+
+    // Whether to show search box
+    showSearch: propTypes.bool.def(true),
+
+    isHorizontal: propTypes.bool,
+    // menu Mode
     menuMode: {
-      type: [String] as PropType<MenuModeEnum | null>,
+      type: [String] as PropType<Nullable<MenuModeEnum>>,
       default: '',
     },
   },
@@ -5,7 +5,7 @@ import defaultSetting from &#39;/@/settings/projectSetting&#39;;
 import { defineComponent, computed, unref, FunctionalComponent } from 'vue';
 import { BasicDrawer } from '/@/components/Drawer/index';
 import { Divider, Switch, Tooltip, InputNumber, Select } from 'ant-design-vue';
-import Button from '/@/components/Button/index.vue';
+import { Button } from '/@/components/Button';
 import { CopyOutlined, RedoOutlined, CheckOutlined } from '@ant-design/icons-vue';
 import { MenuTypeEnum } from '/@/enums/menuEnum';
@@ -13,5 +13,4 @@ export const localeList: DropMenu[] = [
     event: 'en',
   },
 ];
-
 export default messages;
 import { createApp } from 'vue';
+import App from './App.vue';
 import router, { setupRouter } from '/@/router';
 import { setupStore } from '/@/store';
@@ -6,12 +7,9 @@ import { setupAntd } from &#39;/@/setup/ant-design-vue&#39;;
 import { setupErrorHandle } from '/@/setup/error-handle';
 import { setupGlobDirectives } from '/@/setup/directives';
 import { setupI18n } from '/@/setup/i18n';
-
 import { setupProdMockServer } from '../mock/_createProductionServer';
 import { setApp } from '/@/setup/App';
-import App from './App.vue';
-
 import { isDevMode, isProdMode, isUseMock } from '/@/utils/env';
 import '/@/design/index.less';
@@ -10,7 +10,7 @@ const form: AppRouteModule = {
     redirect: '/form/basic',
     meta: {
       icon: 'ant-design:table-outlined',
-      title: 'rroutes.demo.form.form',
+      title: 'routes.demo.form.form',
     },
   },
@@ -20,7 +20,7 @@ const form: AppRouteModule = {
       name: 'FormBasicDemo',
       component: () => import('/@/views/demo/form/index.vue'),
       meta: {
-        title: 'rroutes.demo.form.basic',
+        title: 'routes.demo.form.basic',
       },
     },
     {
@@ -28,7 +28,7 @@ const form: AppRouteModule = {
       name: 'UseFormDemo',
       component: () => import('/@/views/demo/form/UseForm.vue'),
       meta: {
-        title: 'rroutes.demo.form.useForm',
+        title: 'routes.demo.form.useForm',
       },
     },
     {
@@ -36,7 +36,7 @@ const form: AppRouteModule = {
       name: 'RefFormDemo',
       component: () => import('/@/views/demo/form/RefForm.vue'),
       meta: {
-        title: 'rroutes.demo.form.refForm',
+        title: 'routes.demo.form.refForm',
       },
     },
     {
@@ -44,7 +44,7 @@ const form: AppRouteModule = {
       name: 'AdvancedFormDemo',
       component: () => import('/@/views/demo/form/AdvancedForm.vue'),
       meta: {
-        title: 'rroutes.demo.form.advancedForm',
+        title: 'routes.demo.form.advancedForm',
       },
     },
     {
@@ -52,7 +52,7 @@ const form: AppRouteModule = {
       name: 'RuleFormDemo',
       component: () => import('/@/views/demo/form/RuleForm.vue'),
       meta: {
-        title: 'rroutes.demo.form.ruleForm',
+        title: 'routes.demo.form.ruleForm',
       },
     },
     {
@@ -60,7 +60,7 @@ const form: AppRouteModule = {
       name: 'DynamicFormDemo',
       component: () => import('/@/views/demo/form/DynamicForm.vue'),
       meta: {
-        title: 'rroutes.demo.form.dynamicForm',
+        title: 'routes.demo.form.dynamicForm',
       },
     },
     {
@@ -68,7 +68,7 @@ const form: AppRouteModule = {
       name: 'CustomerFormDemo',
       component: () => import('/@/views/demo/form/CustomerForm.vue'),
       meta: {
-        title: 'rroutes.demo.form.customerForm',
+        title: 'routes.demo.form.customerForm',
       },
     },
   ],
@@ -30,8 +30,6 @@ hotModuleUnregisterModule(NAME);
 const { permissionCacheType } = useProjectSetting();
-const { t } = useI18n('sys.app');
-
 function getCache<T>(key: string) {
   const fn = permissionCacheType === CacheTypeEnum.LOCAL ? getLocal : getSession;
   return fn(key) as T;
@@ -145,6 +143,7 @@ class User extends VuexModule {
   @Action
   async confirmLoginOut() {
     const { createConfirm } = useMessage();
+    const { t } = useI18n('sys.app');
     createConfirm({
       iconType: 'warning',
       title: t('loginOutTip'),
@@ -3,10 +3,9 @@ import { userStore } from &#39;/@/store/modules/user&#39;;
 import { useI18n } from '/@/hooks/web/useI18n';
 const { createMessage } = useMessage();
-const { t } = useI18n('sys.api');
-
 const error = createMessage.error!;
 export function checkStatus(status: number, msg: string): void {
+  const { t } = useI18n('sys.api');
   switch (status) {
     case 400:
       error(`${msg}`);
@@ -22,7 +22,6 @@ import { errorStore } from &#39;/@/store/modules/error&#39;;
 import { errorResult } from './const';
 import { useI18n } from '/@/hooks/web/useI18n';
-const { t } = useI18n('sys.api');
 const globSetting = useGlobSetting();
 const prefix = globSetting.urlPrefix;
 const { createMessage, createErrorModal } = useMessage();
@@ -35,6 +34,7 @@ const transform: AxiosTransform = {
    * @description: 处理请求数据
    */
   transformRequestData: (res: AxiosResponse<Result>, options: RequestOptions) => {
+    const { t } = useI18n('sys.api');
     const { isTransformRequestResult } = options;
     // 不进行任何处理，直接返回
     // 用于页面代码可能需要直接获取code，data，message这些信息时开启
@@ -154,6 +154,7 @@ const transform: AxiosTransform = {
    * @description: 响应错误处理
    */
   responseInterceptorsCatch: (error: any) => {
+    const { t } = useI18n('sys.api');
     errorStore.setupErrorHandle(error);
     const { response, code, message } = error || {};
     const msg: string =
+import { CSSProperties, VNodeChild } from 'vue';
+import { createTypes, VueTypeValidableDef, VueTypesInterface } from 'vue-types';
+
+type VueNode = VNodeChild | JSX.Element;
+
+type PropTypes = VueTypesInterface & {
+  readonly style: VueTypeValidableDef<CSSProperties>;
+  readonly VNodeChild: VueTypeValidableDef<VueNode>;
+  // readonly trueBool: VueTypeValidableDef<boolean>;
+};
+
+const propTypes = createTypes({
+  func: undefined,
+  bool: undefined,
+  string: undefined,
+  number: undefined,
+  object: undefined,
+  integer: undefined,
+}) as PropTypes;
+
+propTypes.extend([
+  {
+    name: 'style',
+    getter: true,
+    type: [String, Object],
+    default: undefined,
+  },
+  {
+    name: 'VNodeChild',
+    getter: true,
+    type: undefined,
+  },
+  // {
+  //   name: 'trueBool',
+  //   getter: true,
+  //   type: Boolean,
+  //   default: true,
+  // },
+]);
+export { propTypes };
@@ -11,7 +11,7 @@
 <script lang="ts">
   import { defineComponent } from 'vue';
-  import StrengthMeter from '/@/components/StrengthMeter/index';
+  import { StrengthMeter } from '/@/components/StrengthMeter';
   export default defineComponent({
     components: {
       StrengthMeter,
@@ -11,7 +11,7 @@
 <script lang="ts">
   import { defineComponent, ref } from 'vue';
   import { Alert } from 'ant-design-vue';
-  import ClickOutSide from '/@/components/ClickOutSide/index.vue';
+  import { ClickOutSide } from '/@/components/ClickOutSide';
   export default defineComponent({
     components: { ClickOutSide, Alert },
     setup() {
 import { DescItem } from '/@/components/Description/index';
 import { BasicColumn } from '/@/components/Table/src/types/table';
-import Button from '/@/components/Button/index.vue';
+import { Button } from '/@/components/Button';
 import { Badge } from 'ant-design-vue';
@@ -16,23 +16,23 @@
       </a-card>
     </div>
-    <AppPageFooter>
+    <PageFooter>
       <template #right>
         <a-button type="primary" @click="submitAll">提交</a-button>
       </template>
-    </AppPageFooter>
+    </PageFooter>
   </div>
 </template>
 <script lang="ts">
   import { BasicForm, useForm } from '/@/components/Form';
   import { defineComponent, ref } from 'vue';
   import PersonTable from './PersonTable.vue';
-  import { AppPageFooter } from '/@/components/Application';
+  import { PageFooter } from '/@/components/Page';
   import { schemas, taskSchemas } from './data';
   export default defineComponent({
-    components: { BasicForm, PersonTable, AppPageFooter },
+    components: { BasicForm, PersonTable, PageFooter },
     setup() {
       const tableRef = ref<{ getDataSource: () => any } | null>(null);
@@ -63,7 +63,7 @@
   import { defineComponent, reactive, ref, unref, toRaw } from 'vue';
   import { Checkbox } from 'ant-design-vue';
-  import Button from '/@/components/Button/index.vue';
+  import { Button } from '/@/components/Button';
   import { AppLocalePicker } from '/@/components/Application';
   // import { BasicDragVerify, DragVerifyActionType } from '/@/components/Verify/index';
@@ -8318,7 +8318,7 @@ vue-router@^4.0.0-rc.5:
   resolved "https://registry.npmjs.org/vue-router/-/vue-router-4.0.0-rc.5.tgz#191d32e3d5276641ff21e881d34e33a71dc6e8f0"
   integrity sha512-Q8Tt6VGwGMN5qASeIdjSydU3uRADK9AUkqnbnzmTz+zZKS0W6GZOAuP235lf3y5/MqEFSKRJGaTWPEY0t+Rjmg==
-vue-types@^3.0.0:
+vue-types@^3.0.0, vue-types@^3.0.1:
   version "3.0.1"
   resolved "https://registry.npmjs.org/vue-types/-/vue-types-3.0.1.tgz#20e9baae8673de8093d0a989234695d08d544be0"
   integrity sha512-UbvbzPu8DNzZRfMB1RDTFKBB6seMm80scMFdP+GkKaw00EugC3cjq9AtlS4y258vDkpAe9HfqbRO4cp63qVHXQ==