refactor(virtual-scroll): refactor virtualScroll component

src/components/Markdown/index.ts

-import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
-export const MarkDown = createAsyncComponent(() => import('./src/Markdown.vue'));
+import { withInstall } from '/@/utils';
+import markDown from './src/Markdown.vue';
 
-export * from './src/types';
+export const MarkDown = withInstall(markDown);
+export * from './src/typing';

src/components/Markdown/src/Markdown.vue

@@ -14,18 +14,17 @@
   } from 'vue';
   import Vditor from 'vditor';
   import 'vditor/dist/index.css';
-
-  import { propTypes } from '/@/utils/propTypes';
   import { useLocale } from '/@/locales/useLocale';
   import { useModalContext } from '../../Modal';
   import { useRootSetting } from '/@/hooks/setting/useRootSetting';
 
   type Lang = 'zh_CN' | 'en_US' | 'ja_JP' | 'ko_KR' | undefined;
+
   export default defineComponent({
     inheritAttrs: false,
     props: {
-      height: propTypes.number.def(360),
-      value: propTypes.string.def(''),
+      height: { type: Number, default: 360 },
+      value: { type: String, default: '' },
     },
     emits: ['change', 'get'],
     setup(props, { attrs, emit }) {

src/components/StrengthMeter/index.ts

-export { default as StrengthMeter } from './src/StrengthMeter.vue';
+import { withInstall } from '/@/utils';
+import strengthMeter from './src/StrengthMeter.vue';
+
+export const StrengthMeter = withInstall(strengthMeter);

src/components/StrengthMeter/src/StrengthMeter.vue

@@ -20,10 +20,7 @@
 
 <script lang="ts">
   import { defineComponent, computed, ref, watch, unref, watchEffect } from 'vue';
-
   import { Input } from 'ant-design-vue';
-
-  // @ts-ignore
   import { zxcvbn } from '@zxcvbn-ts/core';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { propTypes } from '/@/utils/propTypes';

src/components/Time/index.ts

-export { default as Time } from './src/Time.vue';
+import { withInstall } from '/@/utils/index';
+import time from './src/Time.vue';
+
+export const Time = withInstall(time);

src/components/Time/src/Time.vue

@@ -3,10 +3,8 @@
 </template>
 <script lang="ts">
   import { defineComponent, ref, watch } from 'vue';
-
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useIntervalFn } from '@vueuse/core';
-
   import { formatToDateTime, formatToDate, dateUtil } from '/@/utils/dateUtil';
   import { isNumber, isObject, isString } from '/@/utils/is';
   import { propTypes } from '/@/utils/propTypes';
@@ -15,6 +13,7 @@
   const ONE_MINUTES = ONE_SECONDS * 60;
   const ONE_HOUR = ONE_MINUTES * 60;
   const ONE_DAY = ONE_HOUR * 24;
+
   export default defineComponent({
     name: 'Time',
     props: {

src/components/Tinymce/index.ts

-import Tinymce from './src/Editor.vue';
-export { Tinymce };
+import { withInstall } from '/@/utils/index';
+import tinymce from './src/Editor.vue';
+
+export const Tinymce = withInstall(tinymce);

src/components/Tinymce/src/Editor.vue

@@ -16,7 +16,6 @@
   import type { RawEditorSettings } from 'tinymce';
   import tinymce from 'tinymce/tinymce';
   import 'tinymce/themes/silver';
-
   import 'tinymce/icons/default/icons';
   import 'tinymce/plugins/advlist';
   import 'tinymce/plugins/anchor';
@@ -58,11 +57,8 @@
     onUnmounted,
     onDeactivated,
   } from 'vue';
-
   import ImgUpload from './ImgUpload.vue';
-
   import { toolbar, plugins } from './tinymce';
-
   import { buildShortUUID } from '/@/utils/uuid';
   import { bindHandlers } from './helper';
   import { onMountedOrActivated } from '/@/hooks/core/onMountedOrActivated';
@@ -96,7 +92,6 @@
       required: false,
       default: 400,
     },
-
     width: {
       type: [Number, String] as PropType<string | number>,
       required: false,

src/components/Tinymce/src/ImgUpload.vue

@@ -52,9 +52,9 @@
       function handleChange(info: Recordable) {
         const file = info.file;
         const status = file?.status;
-
         const url = file?.response?.url;
         const name = file?.name;
+
         if (status === 'uploading') {
           if (!uploading) {
             emit('uploading', name);

src/components/VirtualScroll/index.ts

-import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+import { withInstall } from '/@/utils/index';
+import vScroll from './src/VirtualScroll.vue';
 
-export const VScroll = createAsyncComponent(() => import('./src/VirtualScroll'));
+export const VScroll = withInstall(vScroll);

src/components/VirtualScroll/src/VirtualScroll.tsx → src/components/VirtualScroll/src/VirtualScroll.vue

-import {
+<script lang="tsx">
+  import {
     defineComponent,
     computed,
     ref,
@@ -8,16 +9,36 @@ import {
     watch,
     nextTick,
     CSSProperties,
-} from 'vue';
-import { useEventListener } from '/@/hooks/event/useEventListener';
-
-import { props as basicProps } from './props';
-import { getSlot } from '/@/utils/helper/tsxHelper';
-import './index.less';
+  } from 'vue';
+  import { useEventListener } from '/@/hooks/event/useEventListener';
+  import { getSlot } from '/@/utils/helper/tsxHelper';
+
+  type NumberOrNumberString = PropType<string | number | undefined>;
+
+  const props = {
+    height: [Number, String] as NumberOrNumberString,
+    maxHeight: [Number, String] as NumberOrNumberString,
+    maxWidth: [Number, String] as NumberOrNumberString,
+    minHeight: [Number, String] as NumberOrNumberString,
+    minWidth: [Number, String] as NumberOrNumberString,
+    width: [Number, String] as NumberOrNumberString,
+    bench: {
+      type: [Number, String] as NumberOrNumberString,
+      default: 0,
+    },
+    itemHeight: {
+      type: [Number, String] as NumberOrNumberString,
+      required: true,
+    },
+    items: {
+      type: Array as PropType<any[]>,
+      default: () => [],
+    },
+  };
 
-const prefixCls = 'virtual-scroll';
+  const prefixCls = 'virtual-scroll';
 
-function convertToUnit(str: string | number | null | undefined, unit = 'px'): string | undefined {
+  function convertToUnit(str: string | number | null | undefined, unit = 'px'): string | undefined {
     if (str == null || str === '') {
       return undefined;
     } else if (isNaN(+str!)) {
@@ -25,11 +46,11 @@ function convertToUnit(str: string | number | null | undefined, unit = 'px'): st
     } else {
       return `${Number(str)}${unit}`;
     }
-}
+  }
 
-export default defineComponent({
+  export default defineComponent({
     name: 'VirtualScroll',
-  props: basicProps,
+    props,
     setup(props, { slots }) {
       const wrapElRef = ref<HTMLDivElement | null>(null);
       const state = reactive({
@@ -113,7 +134,6 @@ export default defineComponent({
 
       function genChild(item: any, index: number) {
         index += unref(getFirstToRenderRef);
-
         const top = convertToUnit(index * unref(getItemHeightRef));
         return (
           <div class={`${prefixCls}__item`} style={{ top }} key={index}>
@@ -137,6 +157,7 @@ export default defineComponent({
           });
         });
       });
+
       return () => (
         <div class={prefixCls} style={unref(getWrapStyleRef)} ref={wrapElRef}>
           <div class={`${prefixCls}__container`} style={unref(getContainerStyleRef)}>
@@ -145,4 +166,25 @@ export default defineComponent({
         </div>
       );
     },
-});
+  });
+</script>
+<style scoped lang="less">
+  .virtual-scroll {
+    position: relative;
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    overflow: auto;
+    flex: 1 1 auto;
+
+    &__container {
+      display: block;
+    }
+
+    &__item {
+      position: absolute;
+      right: 0;
+      left: 0;
+    }
+  }
+</style>

src/components/VirtualScroll/src/index.less

-.virtual-scroll {
-  position: relative;
-  display: block;
-  width: 100%;
-  max-width: 100%;
-  overflow: auto;
-  flex: 1 1 auto;
-
-  &__container {
-    display: block;
-  }
-
-  &__item {
-    position: absolute;
-    right: 0;
-    left: 0;
-  }
-}

src/components/VirtualScroll/src/props.ts

-// Helpers
-
-import type { PropType } from 'vue';
-// Types
-
-export type NumberOrNumberString = PropType<string | number | undefined>;
-
-export const props = {
-  height: [Number, String] as NumberOrNumberString,
-  maxHeight: [Number, String] as NumberOrNumberString,
-  maxWidth: [Number, String] as NumberOrNumberString,
-  minHeight: [Number, String] as NumberOrNumberString,
-  minWidth: [Number, String] as NumberOrNumberString,
-  width: [Number, String] as NumberOrNumberString,
-  bench: {
-    type: [Number, String] as NumberOrNumberString,
-    default: 0,
-  },
-  itemHeight: {
-    type: [Number, String] as NumberOrNumberString,
-    required: true,
-  },
-  items: {
-    type: Array as PropType<any[]>,
-    default: () => [],
-  },
-};

src/components/registerGlobComp.ts

@@ -11,7 +11,7 @@ import { App } from 'vue';
 const compList = [Icon, AntButton.Group];
 
 export function registerGlobComp(app: App) {
-  compList.forEach((comp: any) => {
+  compList.forEach((comp) => {
     app.component(comp.name || comp.displayName, comp);
   });