From 3cfa9f57c2550d054114d2800cc424907962f65f Mon Sep 17 00:00:00 2001 From: Kuingsmile Date: Tue, 23 Jul 2024 13:09:32 +0800 Subject: [PATCH] :sparkles: Feature(custom): optimize gallery page performance ISSUES CLOSED: #225 --- public/loading.jpg | Bin 0 -> 9458 bytes src/main.ts | 6 +++--- src/renderer/pages/Gallery.vue | 16 +++++++++++++--- src/renderer/pages/Upload.vue | 2 ++ src/renderer/utils/drag.ts | 23 +++++++++++++++++++++++ src/renderer/utils/mixin.ts | 30 ------------------------------ 6 files changed, 41 insertions(+), 36 deletions(-) create mode 100644 public/loading.jpg create mode 100644 src/renderer/utils/drag.ts delete mode 100644 src/renderer/utils/mixin.ts diff --git a/public/loading.jpg b/public/loading.jpg new file mode 100644 index 0000000000000000000000000000000000000000..4e8a8f71e66981453c4987f22b5d0eab6a86cb3f GIT binary patch literal 9458 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 H>CgWK(PBjG literal 0 HcmV?d00001 diff --git a/src/main.ts b/src/main.ts index a7865d7..2fd15df 100644 --- a/src/main.ts +++ b/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) diff --git a/src/renderer/pages/Gallery.vue b/src/renderer/pages/Gallery.vue index d431292..60f92da 100644 --- a/src/renderer/pages/Gallery.vue +++ b/src/renderer/pages/Gallery.vue @@ -184,7 +184,12 @@ class="gallery-list__img" >
- +
{{ 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( diff --git a/src/renderer/pages/Upload.vue b/src/renderer/pages/Upload.vue index cb11413..a34e074 100644 --- a/src/renderer/pages/Upload.vue +++ b/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) diff --git a/src/renderer/utils/drag.ts b/src/renderer/utils/drag.ts new file mode 100644 index 0000000..9e2085d --- /dev/null +++ b/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(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) + }) +} diff --git a/src/renderer/utils/mixin.ts b/src/renderer/utils/mixin.ts deleted file mode 100644 index b2d8211..0000000 --- a/src/renderer/utils/mixin.ts +++ /dev/null @@ -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(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) - } -}