✨ Feature(custom): optimize gallery page performance

ISSUES CLOSED: #225

src/main.ts

@@ -25,7 +25,6 @@ import db from '@/utils/db'
 import { T } from '@/i18n/index'
 import { store } from '@/store'
 import { initTalkingData } from '@/utils/analytic'
-import { dragMixin } from '@/utils/mixin'
 
 webFrame.setVisualZoomLevelLimits(1, 1)
 
@@ -37,11 +36,12 @@ app.config.globalProperties.triggerRPC = triggerRPC
 app.config.globalProperties.sendRPC = sendRPC
 app.config.globalProperties.sendToMain = sendToMain
 
-app.mixin(dragMixin)
 const pinia = createPinia()
 pinia.use(piniaPluginPersistedstate)
 app.use(VueLazyLoad, {
-  error: `file://${__static.replace(/\\/g, '/')}/unknown-file-type.svg`
+  loading: `file://${__static.replace(/\\/g, '/')}/loading.jpg`,
+  error: `file://${__static.replace(/\\/g, '/')}/unknown-file-type.svg`,
+  delay: 500
 })
 app.use(ElementUI)
 app.use(router)

src/renderer/pages/Gallery.vue

@@ -184,7 +184,12 @@
             class="gallery-list__img"
           >
             <div class="gallery-list__item" @click="zoomImage(index)">
-              <img v-lazy="item.galleryPath || item.imgUrl" class="gallery-list__item-img" />
+              <img
+                v-lazy="{
+                  src: item.galleryPath || item.imgUrl
+                }"
+                class="gallery-list__item-img"
+              />
             </div>
             <div class="gallery-list__file-name" :title="item.fileName">
               {{ formatFileName(item.fileName || '') }}
@@ -385,6 +390,7 @@ const isShowBatchRenameDialog = ref(false)
 const batchRenameMatch = ref('')
 const batchRenameReplace = ref('')
 const dateRange = ref('')
+
 const mathcedCount = computed(() => {
   return filterList.value.filter((item: any) => {
     return customStrMatch(item.imgUrl, batchRenameMatch.value)
@@ -411,7 +417,6 @@ onBeforeMount(async () => {
     })
   })
   updateGallery()
-
   document.addEventListener('keydown', handleDetectShiftKey)
   document.addEventListener('keyup', handleDetectShiftKey)
 })
@@ -423,7 +428,10 @@ function handleDetectShiftKey(event: KeyboardEvent) {
 }
 
 const filterList = computed(() => {
-  return getGallery()
+  const start = new Date().getTime()
+  const res = getGallery()
+  console.log(`filterList: ${new Date().getTime() - start}ms`)
+  return res
 })
 
 const isAllSelected = computed(() => {
@@ -479,7 +487,9 @@ function getGallery(): IGalleryItem[] {
 }
 
 async function updateGallery() {
+  const start = new Date().getTime()
   images.value = (await $$db.get({ orderBy: 'desc' }))!.data
+  console.log(`updateGallery: ${new Date().getTime() - start}ms`)
 }
 
 watch(

src/renderer/pages/Upload.vue

@@ -127,7 +127,9 @@ import { SHOW_INPUT_BOX, SHOW_INPUT_BOX_RESPONSE } from '#/events/constants'
 import { IPasteStyle, IRPCActionType } from '#/types/enum'
 import { isUrl } from '#/utils/common'
 import { configPaths } from '#/utils/configPaths'
+import { useDragEventListeners } from '@/utils/drag'
 
+useDragEventListeners()
 const $router = useRouter()
 
 const imageProcessDialogVisible = ref(false)

src/renderer/utils/drag.ts

@@ -0,0 +1,23 @@
+import { onBeforeUnmount, onMounted } from 'vue'
+
+function disableDrag(e: DragEvent) {
+  const dropzone = document.getElementById('upload-area')
+  if (dropzone === null || !dropzone.contains(<Node>e.target)) {
+    e.preventDefault()
+    e.dataTransfer!.effectAllowed = 'none'
+    e.dataTransfer!.dropEffect = 'none'
+  }
+}
+
+export function useDragEventListeners() {
+  onMounted(() => {
+    window.addEventListener('dragenter', disableDrag, false)
+    window.addEventListener('dragover', disableDrag)
+    window.addEventListener('drop', disableDrag)
+  })
+  onBeforeUnmount(() => {
+    window.removeEventListener('dragenter', disableDrag, false)
+    window.removeEventListener('dragover', disableDrag)
+    window.removeEventListener('drop', disableDrag)
+  })
+}

src/renderer/utils/mixin.ts

@@ -1,30 +0,0 @@
-import { ComponentOptions } from 'vue'
-
-export const dragMixin: ComponentOptions = {
-  mounted() {
-    this.disableDragEvent()
-  },
-
-  methods: {
-    disableDragEvent() {
-      window.addEventListener('dragenter', this.disableDrag, false)
-      window.addEventListener('dragover', this.disableDrag)
-      window.addEventListener('drop', this.disableDrag)
-    },
-
-    disableDrag(e: DragEvent) {
-      const dropzone = document.getElementById('upload-area')
-      if (dropzone === null || !dropzone.contains(<Node>e.target)) {
-        e.preventDefault()
-        e.dataTransfer!.effectAllowed = 'none'
-        e.dataTransfer!.dropEffect = 'none'
-      }
-    }
-  },
-
-  beforeUnmount() {
-    window.removeEventListener('dragenter', this.disableDrag, false)
-    window.removeEventListener('dragover', this.disableDrag)
-    window.removeEventListener('drop', this.disableDrag)
-  }
-}