style: 代码优化

src/views/workbench/components/recommend-template.vue

 <script setup lang="ts">
-import { computed, onMounted, ref, toRefs, watch } from 'vue'
+import { computed, onMounted, ref, watch, useTemplateRef, watchEffect } from 'vue'
 import TemplatePreviewModal from './template-preview-modal.vue'
 import { useScroll } from '@vueuse/core'
 import { DigitalTemplate, TemplateType } from '@/store/types/template'
@@ -13,6 +13,8 @@ interface PagingInfo {
   totalRows: number
 }
 
+const templateListRef = useTemplateRef<HTMLDivElement>('templateListRef')
+
 const router = useRouter()
 
 const previewModalVisible = ref(false)
@@ -32,12 +34,11 @@ const columnHeights = ref<number[]>([])
 const waterfallHeight = ref(900)
 const templateClassifyIsLoading = ref(false)
 const templateBottomIsLoading = ref(false)
-const templateListEl = ref(null)
+
 const smooth = ref(false)
 
 const behavior = computed(() => (smooth.value ? 'smooth' : 'auto'))
-const { arrivedState } = useScroll(templateListEl, { behavior })
-const { bottom } = toRefs(arrivedState)
+const { arrivedState } = useScroll(templateListRef, { behavior })
 
 const templateClassify = [
   { value: '', label: '熱門' },
@@ -60,12 +61,12 @@ watch(checkedClassifyValue, async () => {
   await getTemplateList(true)
 })
 
-watch(bottom, async (newBottom) => {
-  if (newBottom) {
+watchEffect(() => {
+  if (arrivedState.bottom) {
     if (pagingInfo.value.pageNo < pagingInfo.value.totalPages) {
       templateBottomIsLoading.value = true
       pagingInfo.value.pageNo += 1
-      await getTemplateList()
+      getTemplateList()
     }
   }
 })
@@ -80,27 +81,25 @@ async function getTemplateList(refresh = false) {
     if (templateClassifyIsLoading.value) return
   }
 
-  try {
-    const res = await fetchDigitalHumanTemplateStatusList<DigitalTemplate[]>(
-      checkedClassifyValue.value,
-      pagingInfo.value,
-    )
-    if (res.code !== 0) return
-
-    templateList.value = refresh ? res.data : [...templateList.value, ...res.data]
-
-    const positions = await calculatePositions(templateList.value)
-
-    newTemplateList.value = templateList.value.map((template, index) => ({
-      ...template,
-      position: positions[index],
-    }))
-
-    pagingInfo.value = res.pagingInfo as PagingInfo
-  } finally {
-    templateClassifyIsLoading.value = false
-    templateBottomIsLoading.value = false
-  }
+  fetchDigitalHumanTemplateStatusList<DigitalTemplate[]>(checkedClassifyValue.value, pagingInfo.value)
+    .then((res) => {
+      if (res.code !== 0) return
+
+      templateList.value = refresh ? res.data : [...templateList.value, ...res.data]
+
+      return calculatePositions(templateList.value).then((positions) => {
+        newTemplateList.value = templateList.value.map((template, index) => ({
+          ...template,
+          position: positions[index],
+        }))
+
+        pagingInfo.value = res.pagingInfo as PagingInfo
+      })
+    })
+    .finally(() => {
+      templateClassifyIsLoading.value = false
+      templateBottomIsLoading.value = false
+    })
 }
 async function calculatePositions(templates: any[]) {
   const columnHeights = Array(6).fill(0)
@@ -113,7 +112,7 @@ async function calculatePositions(templates: any[]) {
   const imgHeights = await Promise.all(heightPromises)
 
   imgHeights.forEach((imgHeight) => {
-    const minColumnIndex = getMinColoumHeight(columnHeights)
+    const minColumnIndex = getMincColumnHeight(columnHeights)
     const itemTop = columnHeights[minColumnIndex]
     let itemLeft = minColumnIndex * 170
     if (itemLeft !== 0) itemLeft += 20
@@ -131,7 +130,7 @@ async function calculatePositions(templates: any[]) {
   return positions
 }
 
-function calculateImageHeight(template): Promise<number> {
+function calculateImageHeight(template: { videoParams: { width: number; height: number } }): Promise<number> {
   return new Promise((resolve) => {
     const renderWidth = 170
     const renderHeight = (template.videoParams.height / template.videoParams.width) * renderWidth
@@ -147,7 +146,7 @@ function handleOpenPreviewModal(template: DigitalTemplate) {
   }
 }
 
-function getMinColoumHeight(arr: number[]) {
+function getMincColumnHeight(arr: number[]) {
   let min = Math.min(...arr)
   return arr.indexOf(min)
 }
@@ -176,7 +175,7 @@ function handleToCreation(template: DigitalTemplate) {
       </div>
     </div>
     <div
-      ref="templateListEl"
+      ref="templateListRef"
       class="h-screen min-h-[900px] w-full overflow-y-scroll bg-white px-[24px] pb-[16px]"
       style="scrollbar-width: none"
     >