From e1d5acf2ee7575dc77665ed5b7a7cbd32b7b3747 Mon Sep 17 00:00:00 2001
From: Of-qinhai <9207939+Of-qinhai@users.noreply.github.com>
Date: Tue, 14 Jan 2025 10:43:40 +0000
Subject: [PATCH] auto prettier format code

---
 .../community/modules/BaseModelGrid.vue       | 607 +++++++++---------
 1 file changed, 300 insertions(+), 307 deletions(-)

diff --git a/src/components/community/modules/BaseModelGrid.vue b/src/components/community/modules/BaseModelGrid.vue
index 6f1f693..31591e9 100644
--- a/src/components/community/modules/BaseModelGrid.vue
+++ b/src/components/community/modules/BaseModelGrid.vue
@@ -1,225 +1,221 @@
 <script setup lang="ts">
-  import { ref, onMounted, onUnmounted, PropType, computed, watch } from 'vue'
-  import { Model } from '@/types/model'
-  import ModelCard from './ModelCard.vue'
-  import LoadingOverlay from './LoadingOverlay.vue'
-  import EmptyState from './EmptyState.vue'
-  import BackToTop from './BackToTop.vue'
-  import { NVirtualList } from 'naive-ui'
-  import { debounce } from 'lodash-es'
-  import type { VirtualListInst } from 'naive-ui'
-
-  defineOptions({
-    name: 'BaseModelGrid'
-  })
-
-  const props = defineProps({
-    models: {
-      type: Array as () => Model[],
-      required: true
-    },
-    mode: {
-      type: String,
-      required: true
-    },
-    currentTab: {
-      type: String,
-      default: ''
-    },
-    loading: {
-      type: Boolean,
-      default: false
-    },
-    total: {
-      type: Number,
-      required: true
-    },
-    pageSize: {
-      type: Number,
-      required: true
-    },
-    cacheKey: {
-      type: Number,
-      required: true
-    },
-    onFetchData: {
-      type: Function as PropType<(pageNumber: number, pageSize: number) => Promise<unknown[]>>,
-      required: true
-    },
-    onModelAction: {
-      type: Function as PropType<(model: Model) => Promise<void>>,
-      required: true
-    },
-    imageLoadStates: {
-      type: Object as PropType<Map<number | string, boolean>>,
-      required: true
-    },
-    onImageLoad: {
-      type: Function as PropType<(e: Event, modelId: number | string) => void>,
-      required: true
-    },
-    onImageError: {
-      type: Function as PropType<(e: Event, modelId: number | string) => void>,
-      required: true
-    }
-  })
-
-  const virtualListInst = ref<VirtualListInst>()
-  const emit = defineEmits(['scroll', 'loadMore', 'showDetail'])
+    import { ref, onMounted, onUnmounted, PropType, computed, watch } from 'vue'
+    import { Model } from '@/types/model'
+    import ModelCard from './ModelCard.vue'
+    import LoadingOverlay from './LoadingOverlay.vue'
+    import EmptyState from './EmptyState.vue'
+    import BackToTop from './BackToTop.vue'
+    import { NVirtualList } from 'naive-ui'
+    import { debounce } from 'lodash-es'
+    import type { VirtualListInst } from 'naive-ui'
+
+    defineOptions({
+      name: 'BaseModelGrid'
+    })
 
-  const scrollState = ref({
-    ratio: 0,
-    showBackToTop: false,
-    timer: null as number | null
-  })
+    const props = defineProps({
+      models: {
+        type: Array as () => Model[],
+        required: true
+      },
+      mode: {
+        type: String,
+        required: true
+      },
+      currentTab: {
+        type: String,
+        default: ''
+      },
+      loading: {
+        type: Boolean,
+        default: false
+      },
+      total: {
+        type: Number,
+        required: true
+      },
+      pageSize: {
+        type: Number,
+        required: true
+      },
+      cacheKey: {
+        type: Number,
+        required: true
+      },
+      onFetchData: {
+        type: Function as PropType<(pageNumber: number, pageSize: number) => Promise<unknown[]>>,
+        required: true
+      },
+      onModelAction: {
+        type: Function as PropType<(model: Model) => Promise<void>>,
+        required: true
+      },
+      imageLoadStates: {
+        type: Object as PropType<Map<number | string, boolean>>,
+        required: true
+      },
+      onImageLoad: {
+        type: Function as PropType<(e: Event, modelId: number | string) => void>,
+        required: true
+      },
+      onImageError: {
+        type: Function as PropType<(e: Event, modelId: number | string) => void>,
+        required: true
+      }
+    })
 
-  const loadMoreTrigger = ref<HTMLDivElement | null>(null)
+    const virtualListInst = ref<VirtualListInst>()
+    const emit = defineEmits(['scroll', 'loadMore', 'showDetail'])
 
-  const scrollContainer = ref<HTMLElement | null>(null)
+    const scrollState = ref({
+      ratio: 0,
+      showBackToTop: false,
+      timer: null as number | null
+    })
 
-  const handleScroll = (e: Event) => {
-    const target = e.target as HTMLElement
-    const scrollTop = target.scrollTop
+    const loadMoreTrigger = ref<HTMLDivElement | null>(null)
 
-    scrollState.value.showBackToTop = scrollTop > 500
+    const scrollContainer = ref<HTMLElement | null>(null)
 
-    const scrollBottom = scrollTop + target.clientHeight
-    const scrollHeight = target.scrollHeight
-    const scrollPercentage = (scrollBottom / scrollHeight) * 100
+    const handleScroll = (e: Event) => {
+      const target = e.target as HTMLElement
+      const scrollTop = target.scrollTop
 
-    if (scrollPercentage > 90 && !props.loading) {
-      emit('loadMore')
-    }
+      scrollState.value.showBackToTop = scrollTop > 500
 
-    emit('scroll', e)
-  }
+      const scrollBottom = scrollTop + target.clientHeight
+      const scrollHeight = target.scrollHeight
+      const scrollPercentage = (scrollBottom / scrollHeight) * 100
 
-  const windowWidth = ref(window.innerWidth)
+      if (scrollPercentage > 90 && !props.loading) {
+        emit('loadMore')
+      }
 
-  const handleWindowResize = debounce(() => {
-    windowWidth.value = window.innerWidth
-  }, 100)
+      emit('scroll', e)
+    }
 
-  onMounted(() => {
-    const observer = new IntersectionObserver(
-      entries => {
-        if (entries[0].isIntersecting) {
-          emit('loadMore')
+    const windowWidth = ref(window.innerWidth)
+
+    const handleWindowResize = debounce(() => {
+      windowWidth.value = window.innerWidth
+    }, 100)
+
+    onMounted(() => {
+      const observer = new IntersectionObserver(
+        entries => {
+          if (entries[0].isIntersecting) {
+            emit('loadMore')
+          }
+        },
+        {
+          root: document.querySelector('.scroll-container'),
+          threshold: 0.1,
+          rootMargin: '100px'
         }
-      },
-      {
-        root: document.querySelector('.scroll-container'),
-        threshold: 0.1,
-        rootMargin: '100px'
+      )
+
+      if (loadMoreTrigger.value) {
+        observer.observe(loadMoreTrigger.value)
       }
-    )
 
-    if (loadMoreTrigger.value) {
-      observer.observe(loadMoreTrigger.value)
-    }
+      window.addEventListener('resize', handleWindowResize)
 
-    window.addEventListener('resize', handleWindowResize)
+      onUnmounted(() => {
+        observer.disconnect()
+        window.removeEventListener('resize', handleWindowResize)
+      })
+    })
 
-    onUnmounted(() => {
-      observer.disconnect()
-      window.removeEventListener('resize', handleWindowResize)
+    const columnsCount = computed(() => {
+      const width = windowWidth.value
+      if (width >= 1890) return 7
+      if (width >= 1650) return 6
+      if (width >= 1440) return 5
+      if (width >= 992) return 4
+      if (width >= 768) return 3
+      return 2
     })
-  })
-
-  const columnsCount = computed(() => {
-    const width = windowWidth.value
-    if (width >= 1890) return 7
-    if (width >= 1650) return 6
-    if (width >= 1440) return 5
-    if (width >= 992) return 4
-    if (width >= 768) return 3
-    return 2
-  })
-
-  const rows = computed(() => {
-    if (!props.models) return []
-    const result = []
-    const count = columnsCount.value
-    for (let i = 0; i < props.models.length; i += count) {
-      const row = props.models.slice(i, i + count)
-      result.push({
-        id: `row-${i}`,
-        models: row
-      })
-    }
-    return result
-  })
-
-  const rowHeight = computed(() => {
-    const width = windowWidth.value
-    if (width >= 1890) return 340 // 7列
-    if (width >= 1650) return 320 // 6列
-    if (width >= 1440) return 300 // 5列
-    if (width >= 992) return 280 // 4列
-    if (width >= 768) return 260 // 3列
-    return 240 // 2列
-  })
-
-  const virtualListProps = computed(() => ({
-    items: rows.value,
-    itemSize: rowHeight.value,
-    style: {
-<<<<<<< HEAD
-      height: '100%',
-=======
-      maxHeight: 'calc(100vh - 200px)',
-      height: 'auto'
->>>>>>> 1094ae3dd940f985557e3b0668fa5bbe2ec9babe
-    },
-    itemResizable: true,
-    ignoreItemResize: false,
-<<<<<<< HEAD
-    scrollable: false
-  }))
-
-  const backToTop = () => {
-    if (scrollContainer.value) {
-      scrollContainer.value.scrollTo({ top: 0, behavior: 'smooth' })
-    }
-  }   
-=======
-    scrollbarProps: {
-      trigger: 'none'
-    }
-  }))
 
-  const backToTop = () => {
-    virtualListInst.value?.scrollTo({ top: 0 })
-  }
->>>>>>> 1094ae3dd940f985557e3b0668fa5bbe2ec9babe
+    const rows = computed(() => {
+      if (!props.models) return []
+      const result = []
+      const count = columnsCount.value
+      for (let i = 0; i < props.models.length; i += count) {
+        const row = props.models.slice(i, i + count)
+        result.push({
+          id: `row-${i}`,
+          models: row
+        })
+      }
+      return result
+    })
+
+    const rowHeight = computed(() => {
+      const width = windowWidth.value
+      if (width >= 1890) return 340 // 7列
+      if (width >= 1650) return 320 // 6列
+      if (width >= 1440) return 300 // 5列
+      if (width >= 992) return 280 // 4列
+      if (width >= 768) return 260 // 3列
+      return 240 // 2列
+    })
+
+    const virtualListProps = computed(() => ({
+      items: rows.value,
+      itemSize: rowHeight.value,
+      style: {
+  <<<<<<< HEAD
+        height: '100%',
+  =======
+        maxHeight: 'calc(100vh - 200px)',
+        height: 'auto'
+  >>>>>>> 1094ae3dd940f985557e3b0668fa5bbe2ec9babe
+      },
+      itemResizable: true,
+      ignoreItemResize: false,
+  <<<<<<< HEAD
+      scrollable: false
+    }))
 
-  watch(
-    () => props.cacheKey,
-    () => {
+    const backToTop = () => {
       if (scrollContainer.value) {
-        scrollContainer.value.scrollTo({ top: 0 })
-        scrollState.value.showBackToTop = false
+        scrollContainer.value.scrollTo({ top: 0, behavior: 'smooth' })
       }
     }
-  )
+  =======
+      scrollbarProps: {
+        trigger: 'none'
+      }
+    }))
+
+    const backToTop = () => {
+      virtualListInst.value?.scrollTo({ top: 0 })
+    }
+  >>>>>>> 1094ae3dd940f985557e3b0668fa5bbe2ec9babe
+
+    watch(
+      () => props.cacheKey,
+      () => {
+        if (scrollContainer.value) {
+          scrollContainer.value.scrollTo({ top: 0 })
+          scrollState.value.showBackToTop = false
+        }
+      }
+    )
 </script>
 
 <template>
   <div class="flex flex-col h-full">
-    <div 
+    <div
       ref="scrollContainer"
-      class="flex-1 px-6 overflow-auto main-container" 
+      class="flex-1 px-6 overflow-auto main-container"
       @scroll="handleScroll"
     >
       <LoadingOverlay v-if="loading" />
       <div class="scroll-container">
         <EmptyState v-if="!loading && (!models || models.length === 0)" />
         <div v-else class="grid-container">
-          <NVirtualList
-            v-if="rows.length > 0"
-            ref="virtualListInst"
-            v-bind="virtualListProps"
-          >
+          <NVirtualList v-if="rows.length > 0" ref="virtualListInst" v-bind="virtualListProps">
             <template #default="{ item: row }">
               <div class="grid">
                 <ModelCard
@@ -245,60 +241,46 @@
 </template>
 
 <style scoped>
-.main-container {
-  scrollbar-width: thin;
-  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
-}
-
-.main-container::-webkit-scrollbar {
-  width: 6px;
-}
-
-.main-container::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.main-container::-webkit-scrollbar-thumb {
-  background-color: rgba(255, 255, 255, 0.3);
-  border-radius: 4px;
-}
-
-.main-container::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(255, 255, 255, 0.5);
-}
-
-.scroll-container {
-  height: auto;
-  margin-top: 0.5rem;
-  position: relative;
-  min-height: 80vh;
-  display: flex;
-  flex-direction: column;
-}
-
-.virtual-list {
-  width: 100%;
-  height: auto !important;
-  max-height: inherit;
-  overflow-x: hidden !important;
-  padding: 12px 20px 64px 20px;
-  min-height: 300px;
-}
-
-.grid {
-  display: grid;
-  grid-gap: 20px;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  position: relative;
-  transition: opacity 0.3s ease-in-out;
-  align-items: stretch;
-  width: 100%;
-  margin-bottom: 20px;
-  z-index: 1;
-  
-}
-
-@media (min-width: 768px) {
+  .main-container {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
+  }
+
+  .main-container::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .main-container::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .main-container::-webkit-scrollbar-thumb {
+    background-color: rgba(255, 255, 255, 0.3);
+    border-radius: 4px;
+  }
+
+  .main-container::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(255, 255, 255, 0.5);
+  }
+
+  .scroll-container {
+    height: auto;
+    margin-top: 0.5rem;
+    position: relative;
+    min-height: 80vh;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .virtual-list {
+    width: 100%;
+    height: auto !important;
+    max-height: inherit;
+    overflow-x: hidden !important;
+    padding: 12px 20px 64px 20px;
+    min-height: 300px;
+  }
+
   .grid {
     display: grid;
     grid-gap: 20px;
@@ -309,37 +291,76 @@
     width: 100%;
     margin-bottom: 20px;
     z-index: 1;
+
   }
-  /* :deep(.v-vl-items) {
-    padding-bottom: 220px !important;
-  } */
-}
 
-  @media (min-width: 992px) {
+  @media (min-width: 768px) {
     .grid {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
+      display: grid;
+      grid-gap: 20px;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      position: relative;
+      transition: opacity 0.3s ease-in-out;
+      align-items: stretch;
+      width: 100%;
+      margin-bottom: 20px;
+      z-index: 1;
     }
-    :deep(.v-vl-items) {
+    /* :deep(.v-vl-items) {
+      padding-bottom: 220px !important;
+    } */
+  }
+
+    @media (min-width: 992px) {
+      .grid {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+      }
+      :deep(.v-vl-items) {
+        padding-bottom: 200px !important;
+      }
+    }
+    /* :deep(.v-vl-items) {
       padding-bottom: 200px !important;
+    } */
+  }
+
+    @media (min-width: 1650px) {
+      .grid {
+        grid-template-columns: repeat(6, minmax(0, 1fr));
+      }
+      :deep(.v-vl-items) {
+        padding-bottom: 220px !important;
+      }
     }
+    /* :deep(.v-vl-items) {
+      padding-bottom: 100px !important;
+    } */
   }
-  /* :deep(.v-vl-items) {
-    padding-bottom: 200px !important;
-  } */
-}
 
-  @media (min-width: 1650px) {
-    .grid {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
+    .grid-container {
+      position: relative;
+      height: auto;
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      margin: 0 auto;
+      max-width: 2000px;
+      padding-bottom: 100px;
+      padding-right: 6px;
+      flex: 1;
     }
-    :deep(.v-vl-items) {
+    /* :deep(.v-vl-items) {
       padding-bottom: 220px !important;
+    } */
+  }
+
+    :deep(.n-virtual-list::-webkit-scrollbar-track) {
+      background: transparent;
     }
+    /* :deep(.v-vl-items) {
+      padding-bottom: 240px !important;
+    } */
   }
-  /* :deep(.v-vl-items) {
-    padding-bottom: 100px !important;
-  } */
-}
 
   .grid-container {
     position: relative;
@@ -352,57 +373,29 @@
     padding-bottom: 100px;
     padding-right: 6px;
     flex: 1;
+
+  }
+
+  :deep(.n-virtual-list) {
+    overflow: visible !important;
+  }
+
+  :deep(.n-virtual-list::-webkit-scrollbar) {
+    width: 6px;
+    position: absolute;
+    right: 0;
   }
-  /* :deep(.v-vl-items) {
-    padding-bottom: 220px !important;
-  } */
-}
 
   :deep(.n-virtual-list::-webkit-scrollbar-track) {
     background: transparent;
   }
-  /* :deep(.v-vl-items) {
-    padding-bottom: 240px !important;
-  } */
-}
-
-.grid-container {
-  position: relative;
-  height: auto;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  margin: 0 auto;
-  max-width: 2000px;
-  padding-bottom: 100px;
-  padding-right: 6px;
-  flex: 1;
-
-}
-
-:deep(.n-virtual-list) {
-  overflow: visible !important;
-}
-
-:deep(.n-virtual-list::-webkit-scrollbar) {
-  width: 6px;
-  position: absolute;
-  right: 0;
-}
-
-:deep(.n-virtual-list::-webkit-scrollbar-track) {
-  background: transparent;
-}
-
-:deep(.n-virtual-list::-webkit-scrollbar-thumb) {
-  background-color: rgba(255, 255, 255, 0.3);
-  border-radius: 4px;
-}
-
-:deep(.n-virtual-list::-webkit-scrollbar-thumb:hover) {
-  background-color: rgba(255, 255, 255, 0.5);
-}
-
 
+  :deep(.n-virtual-list::-webkit-scrollbar-thumb) {
+    background-color: rgba(255, 255, 255, 0.3);
+    border-radius: 4px;
+  }
 
+  :deep(.n-virtual-list::-webkit-scrollbar-thumb:hover) {
+    background-color: rgba(255, 255, 255, 0.5);
+  }
 </style>