perf: 优化部分组件类型 🧼🧼🧼

packages/fighting-design/alert/src/alert.vue

@@ -4,6 +4,7 @@
   import { FCloseBtn } from '../../close-btn'
   import { FSvgIcon } from '../../svg-icon'
   import { useList, useRun, useGlobal, useAlertList } from '../../_hooks'
+  import type { Ref } from 'vue'
 
   const prop = defineProps(Props)
 
@@ -12,7 +13,7 @@
   /** 替换 type 后得到的 props */
   const params = reactive({
     ...prop,
-    type: getType().value
+    type: getType()
   })
 
   const { styles, classes } = useList(params, 'alert')
@@ -21,7 +22,7 @@
   const isShow = ref<boolean>(true)
 
   /** alertList 节点列表容器 dom */
-  const alertListDom = ref<HTMLElement>(null as unknown as HTMLElement)
+  const alertListEl: Ref<HTMLElement | null> = ref(null)
 
   /** 类名列表 */
   const classList = classes(['type', 'bold', 'simple', 'center', 'round', 'fixed'], 'f-alert')
@@ -40,7 +41,7 @@
 
   onMounted((): void => {
     if (prop.alertList && prop.alertList.length) {
-      const { startMove } = useAlertList(alertListDom.value)
+      const { startMove } = useAlertList(alertListEl.value as HTMLElement)
       startMove(prop.duration || 2000)
     }
   })

packages/fighting-design/avatar/src/avatar.vue

@@ -4,6 +4,7 @@
   import { FSvgIcon } from '../../svg-icon'
   import { useAvatar, useLoadImg, useProps } from '../../_hooks'
   import type { UseLoadImgProp } from '../../_hooks'
+  import type { Ref } from 'vue'
 
   const prop = defineProps(Props)
   const slot = useSlots()
@@ -17,12 +18,12 @@
   )
 
   /** 图片 dom 节点 */
-  const avatarEl = ref<HTMLImageElement>(null as unknown as HTMLImageElement)
+  const avatarEl: Ref<HTMLImageElement | null> = ref(null)
 
   /** 开始触发加载 */
   onMounted((): void => {
     if (!slot.icon && !prop.icon && !prop.text) {
-      loadImg(avatarEl.value)
+      loadImg(avatarEl.value as HTMLImageElement)
     }
   })
 </script>

packages/fighting-design/button/src/button.vue

@@ -7,13 +7,14 @@
   import { useCalculiColor, useRipples, useRun, useGlobal } from '../../_hooks'
   import { sizeChange } from '../../_utils'
   import type { RipplesOptions } from '../../_hooks'
-  import type { CSSProperties } from 'vue'
+  import type { CSSProperties, Ref } from 'vue'
   import type { ClassList, FightingSize } from '../../_interface'
 
   const prop = defineProps(Props)
 
   /** 元素节点 */
-  const FButton = ref<HTMLButtonElement>(null as unknown as HTMLButtonElement)
+  const FButtonEl: Ref<HTMLButtonElement | null> = ref(null)
+
   /** 获取父组件注入的依赖项 */
   const parentInject = inject<FightingSize | null>(BUTTON_GROUP_PROPS_KEY, null)
 
@@ -69,7 +70,7 @@
         type: getType().value
       } as const)
 
-      const { runRipples } = useRipples(evt, FButton.value, options)
+      const { runRipples } = useRipples(evt, FButtonEl.value as HTMLButtonElement, options)
 
       runRipples()
     }

packages/fighting-design/collapse-animation/src/collapse-animation.vue

@@ -1,14 +1,15 @@
 <script lang="ts" setup name="FCollapseAnimation">
   import { Props } from './props'
   import { ref, onMounted, computed, watch } from 'vue'
+  import type { Ref } from 'vue'
 
   const prop = defineProps(Props)
 
   /** 初始是否展开 */
   const isOpened = computed((): boolean => !!prop.opened)
 
   /** om 元素 */
-  const collapseEl = ref<HTMLDivElement>(null as unknown as HTMLDivElement)
+  const collapseEl: Ref<HTMLDivElement | null> = ref(null)
 
   /** 需要展开的尺寸 */
   const defaultSize = ref<number>(null as unknown as number)
@@ -24,6 +25,7 @@
       collapseEl.value.style.height = 'auto'
       /**
        * 将默认尺寸设置为元素的像素高度
+       *
        * @see offsetHeight https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetHeight
        */
       defaultSize.value = collapseEl.value.offsetHeight
@@ -43,10 +45,12 @@
     (newVal: boolean): void => {
       if (prop.disabled) return
 
-      if (newVal) {
-        collapseEl.value.style.height = defaultSize.value + 'px'
-      } else {
-        collapseEl.value.style.height = '0'
+      if (collapseEl.value) {
+        if (newVal) {
+          collapseEl.value.style.height = defaultSize.value + 'px'
+        } else {
+          collapseEl.value.style.height = '0'
+        }
       }
     }
   )

packages/fighting-design/image-preview/src/image-preview.vue

@@ -18,6 +18,7 @@
   } from '../../_svg'
   import { useOperationImg, useVisible } from '../../_hooks'
   import type { ToolbarClickParams } from '../../toolbar'
+  import type { Ref } from 'vue'
 
   const prop = defineProps(Props)
   const emit = defineEmits({
@@ -30,7 +31,7 @@
   const { isVisible, closeVisible } = useVisible(toRef(prop, 'visible'), emit, prop.onClose)
 
   /** 初始展示的图片索引 */
-  const previewShowIndex = ref<number>(prop.showIndex > prop.imgList.length - 1 ? 0 : prop.showIndex)
+  const previewShowIndex: Ref<number> = ref(prop.showIndex > prop.imgList.length - 1 ? 0 : prop.showIndex)
 
   /** 开始图片加载 */
   const imagPreload = (): void => {

packages/fighting-design/image/src/image.vue

@@ -3,7 +3,7 @@
   import { onMounted, ref, computed } from 'vue'
   import { sizeChange } from '../../_utils'
   import { useLoadImg, useProps } from '../../_hooks'
-  import type { CSSProperties } from 'vue'
+  import type { CSSProperties, Ref } from 'vue'
   import type { ClassList } from '../../_interface'
   import type { UseLoadImgProp } from '../../_hooks'
 
@@ -16,10 +16,10 @@
   )
 
   /** 元素节点 */
-  const imageEl = ref<HTMLImageElement>(null as unknown as HTMLImageElement)
+  const imageEl: Ref<HTMLImageElement | null> = ref(null)
 
   onMounted((): void => {
-    loadImg(imageEl.value)
+    loadImg(imageEl.value as HTMLImageElement)
   })
 
   /** 类名列表 */

packages/fighting-design/infinite-scrolling/src/infinite-scrolling.vue

@@ -2,21 +2,22 @@
   import { Props } from './props'
   import { ref } from 'vue'
   import { useRun } from '../../_hooks'
+  import type { Ref } from 'vue'
 
   const prop = defineProps(Props)
 
   /** 是否到达底部 */
   const target = ref(false)
 
   /** 元素节点 */
-  const scrollView = ref<HTMLDivElement>(null as unknown as HTMLDivElement)
+  const scrollEl: Ref<HTMLDivElement | null> = ref(null)
 
   /** 滚动触发 */
   const scroll = (): void => {
     if (prop.loading) return
 
     /** 获取到元素节点 */
-    const view: HTMLDivElement = scrollView.value
+    const view: HTMLDivElement = scrollEl.value as HTMLDivElement
     /**
      * 获取到滚动的距离
      *
@@ -40,7 +41,7 @@
   }
 </script>
 <template>
-  <div ref="scrollView" class="f-infinite-scrolling" :style="styles" @scroll="scroll">
+  <div ref="scrollEl" class="f-infinite-scrolling" :style="styles" @scroll="scroll">
     <slot />
     <div v-if="loading" class="f-infinite-scrolling__loading">加载中...</div>
   </div>

packages/fighting-design/progress/src/progress.vue

@@ -2,14 +2,15 @@
   import { Props } from './props'
   import { sizeChange } from '../../_utils'
   import { computed, ref, onMounted } from 'vue'
-  import type { CSSProperties } from 'vue'
+  import type { CSSProperties, Ref } from 'vue'
 
   const prop = defineProps(Props)
 
   /** 是否展示百分比 */
   const isPercentage = ref<boolean>(false)
+
   /** 元素节点 */
-  const fillRef = ref<HTMLDivElement>(null as unknown as HTMLDivElement)
+  const fillEl: Ref<HTMLDivElement | null> = ref(null)
 
   /** 进度条样式列表 */
   const progressStyle = computed((): CSSProperties => {
@@ -35,7 +36,7 @@
 
   /** 是否展示百分比 */
   const isShowPercentage = (): boolean => {
-    return (isPercentage.value = fillRef.value.clientHeight >= 18 && prop.textInside)
+    return (isPercentage.value = (fillEl.value as HTMLDivElement).clientHeight >= 18 && prop.textInside)
   }
 
   onMounted((): void => {
@@ -54,7 +55,7 @@
   >
     <div class="f-progress__bar" :style="progressStyle">
       <div
-        ref="fillRef"
+        ref="fillEl"
         :class="[
           'f-progress__fill',
           {

packages/fighting-design/ripple/src/ripple.vue

@@ -3,6 +3,7 @@
   import { useRipples, useList, useGlobal } from '../../_hooks'
   import { ref, toRefs, reactive } from 'vue'
   import type { RipplesOptions } from '../../_hooks'
+  import type { Ref } from 'vue'
 
   const prop = defineProps(Props)
 
@@ -17,7 +18,7 @@
   const { styles } = useList(params, 'ripple')
 
   /** 元素节点 */
-  const FRipple = ref<HTMLElement>(null as unknown as HTMLElement)
+  const rippleEl: Ref<HTMLElement | null> = ref(null)
 
   /** 样式列表 */
   const styleList = styles(['startOpacity', 'endOpacity'], false)
@@ -41,14 +42,14 @@
       ripplesColor: ripplesColor.value
     })
 
-    const { runRipples } = useRipples(evt, FRipple.value, options)
+    const { runRipples } = useRipples(evt, rippleEl.value as HTMLElement, options)
 
     runRipples()
   }
 </script>
 
 <template>
-  <div ref="FRipple" class="f-ripple" :style="styleList" @click="handleClick">
+  <div ref="rippleEl" class="f-ripple" :style="styleList" @click="handleClick">
     <slot />
   </div>
 </template>

packages/fighting-design/slider/src/slider.vue

@@ -5,6 +5,7 @@
   import { useList } from '../../_hooks'
   import { FTooltip } from '../../tooltip'
   import dragDirective from './drag'
+  import type { Ref } from 'vue'
 
   const prop = defineProps(Props)
   const emit = defineEmits({
@@ -15,14 +16,16 @@
 
   /** 自定义指令 */
   const vDrag = dragDirective
+
   /** dom 元素 */
-  const FSlider = ref<HTMLDivElement>(null as unknown as HTMLDivElement)
+  const sliderEl: Ref<HTMLDivElement | null> = ref(null)
+
   /** 便宜距离 */
   const rightTx = ref<number>(0)
 
   /** 宽度 */
   const sliderWidth = computed((): number => {
-    return parseInt(FSlider.value.offsetWidth + '')
+    return parseInt((sliderEl.value as HTMLDivElement).offsetWidth + '')
   })
 
   onMounted((): void => {
@@ -75,7 +78,7 @@
 </script>
 
 <template>
-  <div ref="FSlider" class="f-slider" :class="classList" :style="styleList">
+  <div ref="sliderEl" class="f-slider" :class="classList" :style="styleList">
     <div class="f-slider__selected" :style="`width: ${rightTx}px`" />
     <div
       v-drag="onRightDrag"

packages/fighting-design/up-load/src/up-load.vue

@@ -6,19 +6,24 @@
   import { FSvgIcon } from '../../svg-icon'
   import { FCloseBtn } from '../../close-btn'
   import { FIconNotesVue, FIconPlusVue } from '../../_svg'
+  import type { Ref } from 'vue'
 
   const prop = defineProps(Props)
   const emit = defineEmits({
     'update:files': (files: File[]): File[] => files
   })
 
   const dragIng = ref(false)
+
+  /** 文件列表 */
   const fileList = ref<File[]>(null as unknown as File[])
-  const FUpLoadInput = ref(null as unknown as HTMLInputElement)
+
+  /** 文件上传输入框 */
+  const inputEl: Ref<HTMLInputElement | null> = ref(null)
 
   /** 点击上传 */
   const handleClick = (): void => {
-    FUpLoadInput.value.click()
+    (inputEl.value as HTMLInputElement).click()
   }
 
   /**
@@ -36,10 +41,12 @@
    * 过滤文件
    *
    * @param files 文件列表
-   * @return { File[] } 过滤后的文件列表
+   * @return 过滤后的文件列表
    */
   const filterFiles = (files: File[]): File[] => {
     const { maxSize, maxLength } = prop
+
+    /** 文件列表 */
     let list: File[] = [...files]
 
     /** 拦截过大的文件 */
@@ -61,7 +68,9 @@
    * @param evt 事件对象
    */
   const handleChange = (evt: Event): void => {
+    /** 获取文件列表 */
     const files: FileList | null = (evt.target as HTMLInputElement).files
+
     if (files) {
       updateFiles(filterFiles(files as unknown as File[]))
     }
@@ -73,13 +82,14 @@
    * @param index 需要删除的文件索引
    */
   const removeFile = (index: number): void => {
-    ;(fileList.value as File[]).splice(index, 1)
+    (fileList.value as File[]).splice(index, 1)
   }
 
   /**
    * 将文件拖拽进来时触发
    *
    * @param evt 事件对象
+   * @see DragEvent https://developer.mozilla.org/zh-CN/docs/Web/API/DragEvent
    */
   const onDragover = (evt: DragEvent): void => {
     evt.preventDefault()
@@ -90,9 +100,12 @@
    * 放置时触发
    *
    * @param evt 事件对象
+   * @see DragEvent https://developer.mozilla.org/zh-CN/docs/Web/API/DragEvent
    */
   const onDrop = (evt: DragEvent): void => {
     dragIng.value = false
+
+    /** 获取文件列表 */
     const files: FileList = (evt.dataTransfer as DataTransfer).files
     if (files) {
       updateFiles(filterFiles(files as unknown as File[]))
@@ -127,8 +140,9 @@
       </slot>
     </div>
 
+    <!-- 文件上传输入框 -->
     <input
-      ref="FUpLoadInput"
+      ref="inputEl"
       type="file"
       hidden
       :name="name"