From f6c9a789d13a1e092710f962227256cb4b487c63 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=90=8C=E8=90=8C=E5=93=92=E8=B5=AB=E8=90=9D?=
 <ma_shiqing@163.com>
Date: Sun, 13 Aug 2023 00:41:01 -0700
Subject: [PATCH] :bug: Fix: fix a bug of webdav image preview component

---
 src/renderer/components/ImageLocal.vue   | 15 ++++++++++++++-
 src/renderer/components/ImageWebdav.vue  | 18 ++++++++++++++++--
 src/renderer/manage/pages/bucketPage.vue | 17 +++++++----------
 3 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/src/renderer/components/ImageLocal.vue b/src/renderer/components/ImageLocal.vue
index b03d36a..9e0468f 100644
--- a/src/renderer/components/ImageLocal.vue
+++ b/src/renderer/components/ImageLocal.vue
@@ -22,7 +22,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onBeforeMount } from 'vue'
+import { ref, onBeforeMount, watch } from 'vue'
 import { getFileIconPath } from '@/manage/utils/common'
 import { Loading } from '@element-plus/icons-vue'
 import fs from 'fs-extra'
@@ -47,6 +47,19 @@ const props = defineProps(
   }
 )
 
+watch(
+  () => props.localPath,
+  async (newLocalPath, oldLocalPath) => {
+    if (newLocalPath !== oldLocalPath) {
+      try {
+        await createBase64Image()
+      } catch (e) {
+        console.log(e)
+      }
+    }
+  }
+)
+
 const createBase64Image = async () => {
   const filePath = path.normalize(props.localPath)
   const base64 = await fs.readFile(filePath, 'base64')
diff --git a/src/renderer/components/ImageWebdav.vue b/src/renderer/components/ImageWebdav.vue
index 6a9a9ce..aa3c563 100644
--- a/src/renderer/components/ImageWebdav.vue
+++ b/src/renderer/components/ImageWebdav.vue
@@ -22,7 +22,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onBeforeMount } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import { getFileIconPath } from '@/manage/utils/common'
 import { Loading } from '@element-plus/icons-vue'
 
@@ -48,6 +48,20 @@ const props = defineProps(
   }
 )
 
+watch(
+  () => [props.url, props.headers],
+  async (newValues, oldValues) => {
+    if (newValues[0] !== oldValues[0] || newValues[1] !== oldValues[1]) {
+      try {
+        await urlCreateObjectURL()
+      } catch (e) {
+        console.log(e)
+      }
+    }
+  },
+  { deep: true }
+)
+
 const urlCreateObjectURL = async () => {
   await fetch(props.url, {
     method: 'GET',
@@ -59,7 +73,7 @@ const urlCreateObjectURL = async () => {
   })
 }
 
-onBeforeMount(async () => {
+onMounted(async () => {
   await urlCreateObjectURL()
 })
 </script>
diff --git a/src/renderer/manage/pages/bucketPage.vue b/src/renderer/manage/pages/bucketPage.vue
index 15d5a83..8045498 100644
--- a/src/renderer/manage/pages/bucketPage.vue
+++ b/src/renderer/manage/pages/bucketPage.vue
@@ -2199,12 +2199,11 @@ async function resetParam (force: boolean = false) {
 }
 
 watch(route, async (newRoute) => {
-  if (newRoute.query.configMap) {
+  const queryConfigMap = newRoute.query.configMap as string
+  if (queryConfigMap) {
     isShowLoadingPage.value = true
-    const query = newRoute.query.configMap as string
-    for (const key in JSON.parse(query)) {
-      configMap[key] = JSON.parse(query)[key]
-    }
+    const parsedConfigMap = JSON.parse(queryConfigMap)
+    Object.assign(configMap, parsedConfigMap)
     await initCustomDomainList()
     await resetParam(false)
     isShowLoadingPage.value = false
@@ -2227,7 +2226,7 @@ async function forceRefreshFileList () {
 }
 
 watch(currentPageNumber, () => {
-  if (typeof currentPageNumber.value !== 'number' || currentPageNumber.value === null) {
+  if (typeof currentPageNumber.value !== 'number') {
     currentPageNumber.value = 1
   }
 })
@@ -2898,8 +2897,7 @@ async function getBucketFileList () {
     customUrl: currentCustomDomain.value,
     currentPage: currentPageNumber.value
   }
-  const res = await ipcRenderer.invoke('getBucketFileList', configMap.alias, param)
-  return res
+  return await ipcRenderer.invoke('getBucketFileList', configMap.alias, param)
 }
 
 function handleBatchDeleteInfo () {
@@ -3137,8 +3135,7 @@ function getTableKeyOfDb () {
 
 async function searchExistFileList () {
   const table = fileCacheDbInstance.table(currentPicBedName.value)
-  const res = await table.where('key').equals(getTableKeyOfDb()).toArray()
-  return res
+  return await table.where('key').equals(getTableKeyOfDb()).toArray()
 }
 
 function handleDetectShiftKey (event: KeyboardEvent) {