From 9fa989e4302033a60d0c0768d61d61d7bcf521d5 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: Tue, 2 May 2023 22:57:43 +0800
Subject: [PATCH] :sparkles: Feature: url encode in manage page

---
 src/renderer/manage/pages/bucketPage.vue    |  7 ++++---
 src/renderer/manage/pages/manageSetting.vue |  6 +++---
 src/renderer/manage/utils/common.ts         | 17 +++++++++--------
 src/renderer/pages/Upload.vue               |  2 +-
 4 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/renderer/manage/pages/bucketPage.vue b/src/renderer/manage/pages/bucketPage.vue
index 47c0fac5..788f4408 100644
--- a/src/renderer/manage/pages/bucketPage.vue
+++ b/src/renderer/manage/pages/bucketPage.vue
@@ -581,7 +581,7 @@ https://www.baidu.com/img/bd_logo1.png"
                         size="20"
                         style="cursor: pointer;"
                         color="#409EFF"
-                        @click="copyToClipboard(formatLink(item.url, item.fileName, manageStore.config.settings.pasteForma ?? '$markdown', manageStore.config.settings.customPasteFormat ?? '$url'))"
+                        @click="copyToClipboard(formatLink(item.url, item.fileName, manageStore.config.settings.pasteFormat ?? '$markdown', manageStore.config.settings.customPasteFormat ?? '$url'))"
                       >
                         <CopyDocument />
                       </el-icon>
@@ -1506,7 +1506,7 @@ const isShowVideoFileDialog = ref(false)
 const videoFileUrl = ref('')
 const videoPlayerHeaders = ref({})
 const showFileStyle = ref<'list' | 'grid'>('grid')
-const isUploadKeepDirStructure = ref(manageStore.config.settings.isUploadKeepDirStructure ?? true)
+const isUploadKeepDirStructure = computed(() => manageStore.config.settings.isUploadKeepDirStructure ?? true)
 const isShowBatchRenameDialog = ref(false)
 const batchRenameMatch = ref('')
 const batchRenameReplace = ref('')
@@ -3489,7 +3489,7 @@ const columns: Column<any>[] = [
                   size="20"
                   style="cursor: pointer;"
                   color="#409EFF"
-                  onClick={() => copyToClipboard(formatLink(item.url, item.fileName, manageStore.config.settings.pasteForma ?? '$markdown', manageStore.config.settings.customPasteFormat ?? '$url'))}
+                  onClick={() => copyToClipboard(formatLink(item.url, item.fileName, manageStore.config.settings.pasteFormat ?? '$markdown', manageStore.config.settings.customPasteFormat ?? '$url'))}
                 >
                   <CopyDocument />
                 </ElIcon>
@@ -3629,6 +3629,7 @@ const columns: Column<any>[] = [
 ]
 
 onBeforeMount(async () => {
+  console.log('onBeforeMount')
   await manageStore.refreshConfig()
   showLoadingPage.value = true
   await initCustomUrlList()
diff --git a/src/renderer/manage/pages/manageSetting.vue b/src/renderer/manage/pages/manageSetting.vue
index abe724e8..2377d29c 100644
--- a/src/renderer/manage/pages/manageSetting.vue
+++ b/src/renderer/manage/pages/manageSetting.vue
@@ -19,7 +19,7 @@
           style="width: 100%;"
         >
           <el-form
-            lable-position="left"
+            label-position="left"
             label-width="50%"
             size="default"
             style="position: relative;width: 100%;"
@@ -422,7 +422,7 @@
               <el-radio label="markdown">
                 {{ $T('MANAGE_SETTING_CHOOSE_COPY_FORMAT_MARKDOWN') }}
               </el-radio>
-              <el-radio lable="markdown-with-link">
+              <el-radio label="markdown-with-link">
                 {{ $T('MANAGE_SETTING_CHOOSE_COPY_FORMAT_MARKDOWN_WITH_LINK') }}
               </el-radio>
               <el-radio label="rawurl">
@@ -573,7 +573,7 @@ async function initData () {
   form.customRename = config.settings.customRename ?? false
   customRenameFormat.value = config.settings.customRenameFormat ?? '{filename}'
   customPasteFormat.value = config.settings.customPasteFormat ?? '$url'
-  form.pasteFormat = config.settings.pasteForma ?? 'markdown'
+  pasteFormat.value = config.settings.pasteFormat ?? 'markdown'
   downloadDir.value = config.settings.downloadDir ?? ''
   form.isAutoRefresh = config.settings.isAutoRefresh ?? false
   form.isShowThumbnail = config.settings.isShowThumbnail ?? false
diff --git a/src/renderer/manage/utils/common.ts b/src/renderer/manage/utils/common.ts
index 0c14efa1..ce70827d 100644
--- a/src/renderer/manage/utils/common.ts
+++ b/src/renderer/manage/utils/common.ts
@@ -50,24 +50,25 @@ export function renameFile (typeMap : IStringKeyMap, oldName: string): string {
 }
 
 export function formatLink (url: string, fileName: string, type: string, format?: string) : string {
+  const encodedUrl = encodeURI(url)
   switch (type) {
     case 'markdown':
-      return `![${fileName}](${url})`
+      return `![${fileName}](${encodedUrl})`
     case 'html':
-      return `<img src="${url}" alt="${fileName}"/>`
+      return `<img src="${encodedUrl}" alt="${fileName}"/>`
     case 'bbcode':
-      return `[img]${url}[/img]`
+      return `[img]${encodedUrl}[/img]`
     case 'url':
-      return url
+      return encodedUrl
     case 'markdown-with-link':
-      return `[![${fileName}](${url})](${url})`
+      return `[![${fileName}](${encodedUrl})](${encodedUrl})`
     case 'custom':
       if (format && (format.includes('$url') || format.includes('$fileName'))) {
-        return format.replace(/\$url/g, url).replace(/\$fileName/g, fileName)
+        return format.replace(/\$url/g, encodedUrl).replace(/\$fileName/g, fileName)
       }
-      return url
+      return encodedUrl
     default:
-      return url
+      return encodedUrl
   }
 }
 
diff --git a/src/renderer/pages/Upload.vue b/src/renderer/pages/Upload.vue
index 5afc610d..00063e31 100644
--- a/src/renderer/pages/Upload.vue
+++ b/src/renderer/pages/Upload.vue
@@ -17,7 +17,7 @@
               id="upload-view-title"
               @click="handlePicBedNameClick(picBedName, picBedConfigName)"
             >
-              {{ $T('PICTURE_UPLOAD') }} - {{ picBedName }} - {{ picBedConfigName }}
+              {{ picBedName }} - {{ picBedConfigName }}
             </span>
           </el-tooltip>
           <el-icon