From 64328379093e064931a8b0f5b1c28e50ab5fb388 Mon Sep 17 00:00:00 2001
From: Kuingsmile <ma_shiqing@163.com>
Date: Fri, 7 Jun 2024 14:58:10 +0800
Subject: [PATCH] :hammer: Refactor(custom): refactored  setting page

---
 src/main/events/ipcList.ts          |   8 -
 src/renderer/pages/PicGoSetting.vue | 771 ++++++++--------------------
 2 files changed, 220 insertions(+), 559 deletions(-)

diff --git a/src/main/events/ipcList.ts b/src/main/events/ipcList.ts
index 335dce5..d00fd5c 100644
--- a/src/main/events/ipcList.ts
+++ b/src/main/events/ipcList.ts
@@ -235,14 +235,6 @@ export default {
 
     // PicList Setting page IPC
 
-    ipcMain.on('updateCustomLink', () => {
-      const notification = new Notification({
-        title: T('OPERATION_SUCCEED'),
-        body: T('TIPS_CUSTOM_LINK_STYLE_MODIFIED_SUCCEED')
-      })
-      notification.show()
-    })
-
     ipcMain.on('autoStart', (_: IpcMainEvent, val: boolean) => {
       app.setLoginItemSettings({
         openAtLogin: val
diff --git a/src/renderer/pages/PicGoSetting.vue b/src/renderer/pages/PicGoSetting.vue
index 2ee25db..22cb4e3 100644
--- a/src/renderer/pages/PicGoSetting.vue
+++ b/src/renderer/pages/PicGoSetting.vue
@@ -117,7 +117,7 @@
                   :label="$T('SETTINGS_ISHIDEDOCK')"
                 >
                   <el-switch
-                    v-model="form.isHideDock"
+                    v-model="formOfSetting.isHideDock"
                     :active-text="$T('SETTINGS_OPEN')"
                     :inactive-text="$T('SETTINGS_CLOSE')"
                     @change="handleHideDockChange"
@@ -140,10 +140,9 @@
                   :label="$T('SETTINGS_CLOSE_MINI_WINDOW_SYNC')"
                 >
                   <el-switch
-                    v-model="form.autoCloseMiniWindow"
+                    v-model="formOfSetting.autoCloseMiniWindow"
                     :active-text="$T('SETTINGS_OPEN')"
                     :inactive-text="$T('SETTINGS_CLOSE')"
-                    @change="handleAutoCloseMiniWindowChange"
                   />
                 </el-form-item>
                 <el-form-item
@@ -151,10 +150,9 @@
                   :label="$T('SETTINGS_CLOSE_MAIN_WINDOW_SYNC')"
                 >
                   <el-switch
-                    v-model="form.autoCloseMainWindow"
+                    v-model="formOfSetting.autoCloseMainWindow"
                     :active-text="$T('SETTINGS_OPEN')"
                     :inactive-text="$T('SETTINGS_CLOSE')"
-                    @change="handleAutoCloseMainWindowChange"
                   />
                 </el-form-item>
                 <el-form-item
@@ -162,7 +160,7 @@
                   :label="$T('SETTINGS_MINI_WINDOW_ON_TOP')"
                 >
                   <el-switch
-                    v-model="form.miniWindowOntop"
+                    v-model="formOfSetting.miniWindowOntop"
                     :active-text="$T('SETTINGS_OPEN')"
                     :inactive-text="$T('SETTINGS_CLOSE')"
                     @change="handleMiniWindowOntop"
@@ -173,14 +171,13 @@
                   :label="$T('SETTINGS_CUSTOM_MINI_ICON')"
                 >
                   <el-switch
-                    v-model="form.isCustomMiniIcon"
+                    v-model="formOfSetting.isCustomMiniIcon"
                     :active-text="$T('SETTINGS_OPEN')"
                     :inactive-text="$T('SETTINGS_CLOSE')"
-                    @change="handleIsCustomMiniIcon"
                   />
                 </el-form-item>
                 <el-form-item
-                  v-if="os !== 'darwin' && form.isCustomMiniIcon"
+                  v-if="os !== 'darwin' && formOfSetting.isCustomMiniIcon"
                   :label="$T('SETTINGS_CUSTOM_MINI_ICON_PATH')"
                 >
                   <el-button
@@ -196,7 +193,7 @@
                   :label="$T('SETTINGS_LAUNCH_ON_BOOT')"
                 >
                   <el-switch
-                    v-model="form.autoStart"
+                    v-model="formOfSetting.autoStart"
                     :active-text="$T('SETTINGS_OPEN')"
                     :inactive-text="$T('SETTINGS_CLOSE')"
                     @change="handleAutoStartChange"
@@ -320,25 +317,23 @@
                   :label="$T('SETTINGS_AUTO_IMPORT')"
                 >
                   <el-switch
-                    v-model="form.autoImport"
+                    v-model="formOfSetting.autoImport"
                     :active-text="$T('SETTINGS_OPEN')"
                     :inactive-text="$T('SETTINGS_CLOSE')"
-                    @change="autoImportChange"
                   />
                 </el-form-item>
                 <el-form-item
-                  v-if="form.autoImport"
+                  v-if="formOfSetting.autoImport"
                   :label="$T('SETTINGS_AUTO_IMPORT_SELECT_PICBED')"
                 >
                   <el-select
-                    v-model="form.autoImportPicBed"
+                    v-model="formOfSetting.autoImportPicBed"
                     multiple
                     size="small"
                     style="width: 50%"
                     :placeholder="$T('SETTINGS_AUTO_IMPORT_SELECT_PICBED')"
                     :persistent="false"
                     teleported
-                    @change="handleAutoImportPicBedChange"
                   >
                     <el-option
                       v-for="item in picBed"
@@ -352,30 +347,27 @@
                   :label="$T('SETTINGS_SYNC_DELETE_CLOUD')"
                 >
                   <el-switch
-                    v-model="form.deleteCloudFile"
+                    v-model="formOfSetting.deleteCloudFile"
                     :active-text="$T('SETTINGS_OPEN')"
                     :inactive-text="$T('SETTINGS_CLOSE')"
-                    @change="handleDeleteCloudFile"
                   />
                 </el-form-item>
                 <el-form-item
                   :label="$T('SETTINGS_OPEN_UPLOAD_TIPS')"
                 >
                   <el-switch
-                    v-model="form.uploadNotification"
+                    v-model="formOfSetting.uploadNotification"
                     :active-text="$T('SETTINGS_OPEN')"
                     :inactive-text="$T('SETTINGS_CLOSE')"
-                    @change="handleUploadNotification"
                   />
                 </el-form-item>
                 <el-form-item
                   :label="$T('SETTINGS_OPEN_UPLOAD_RESULT_TIPS')"
                 >
                   <el-switch
-                    v-model="form.uploadResultNotification"
+                    v-model="formOfSetting.uploadResultNotification"
                     :active-text="$T('SETTINGS_OPEN')"
                     :inactive-text="$T('SETTINGS_CLOSE')"
-                    @change="handleUploadResultNotification"
                   />
                 </el-form-item>
                 <el-form-item
@@ -394,20 +386,18 @@
                   :label="$T('SETTINGS_RENAME_BEFORE_UPLOAD')"
                 >
                   <el-switch
-                    v-model="form.rename"
+                    v-model="formOfSetting.rename"
                     :active-text="$T('SETTINGS_OPEN')"
                     :inactive-text="$T('SETTINGS_CLOSE')"
-                    @change="handleRename"
                   />
                 </el-form-item>
                 <el-form-item
                   :label="$T('SETTINGS_TIMESTAMP_RENAME')"
                 >
                   <el-switch
-                    v-model="form.autoRename"
+                    v-model="formOfSetting.autoRename"
                     :active-text="$T('SETTINGS_OPEN')"
                     :inactive-text="$T('SETTINGS_CLOSE')"
-                    @change="handleAutoRename"
                   />
                 </el-form-item>
                 <el-form-item
@@ -426,20 +416,18 @@
                   :label="$T('SETTINGS_DELETE_LOCAL_FILE_AFTER_UPLOAD')"
                 >
                   <el-switch
-                    v-model="form.deleteLocalFile"
+                    v-model="formOfSetting.deleteLocalFile"
                     :active-text="$T('SETTINGS_OPEN')"
                     :inactive-text="$T('SETTINGS_CLOSE')"
-                    @change="handleDeleteLocalFile"
                   />
                 </el-form-item>
                 <el-form-item
                   :label="$T('SETTINGS_AUTO_COPY_URL_AFTER_UPLOAD')"
                 >
                   <el-switch
-                    v-model="form.autoCopyUrl"
+                    v-model="formOfSetting.autoCopyUrl"
                     :active-text="$T('SETTINGS_OPEN')"
                     :inactive-text="$T('SETTINGS_CLOSE')"
-                    @change="handleAutoCopyUrl"
                   />
                 </el-form-item>
                 <el-form-item
@@ -458,14 +446,13 @@
                   :label="$T('SETTINGS_SHORT_URL')"
                 >
                   <el-switch
-                    v-model="form.useShortUrl"
+                    v-model="formOfSetting.useShortUrl"
                     :active-text="$T('SETTINGS_OPEN')"
                     :inactive-text="$T('SETTINGS_CLOSE')"
-                    @change="handleUseShortUrl"
                   />
                 </el-form-item>
                 <el-form-item
-                  v-if="form.useShortUrl"
+                  v-if="formOfSetting.useShortUrl"
                   :label="$T('SETTINGS_SHORT_URL_SERVER')"
                 >
                   <el-select
@@ -486,61 +473,56 @@
                   </el-select>
                 </el-form-item>
                 <el-form-item
-                  v-if="form.useShortUrl && form.shortUrlServer === 'c1n'"
+                  v-if="formOfSetting.useShortUrl && formOfSetting.shortUrlServer === 'c1n'"
                   :label="$T('SETTINGS_SHORT_URL_C1N_TOKEN')"
                 >
                   <el-input
-                    v-model="form.c1nToken"
+                    v-model="formOfSetting.c1nToken"
                     size="small"
                     style="width: 50%"
                     :placeholder="$T('SETTINGS_SHORT_URL_C1N_TOKEN')"
-                    @change="handleC1nTokenChange"
                   />
                 </el-form-item>
                 <el-form-item
-                  v-if="form.useShortUrl && form.shortUrlServer === 'yourls'"
+                  v-if="formOfSetting.useShortUrl && formOfSetting.shortUrlServer === 'yourls'"
                   :label="$T('SETTINGS_SHORT_URL_YOURLS_DOMAIN')"
                 >
                   <el-input
-                    v-model="form.yourlsDomain"
+                    v-model="formOfSetting.yourlsDomain"
                     size="small"
                     style="width: 50%"
                     :placeholder="$T('SETTINGS_SHORT_URL_YOURLS_DOMAIN')"
-                    @change="handleYourlsDomainChange"
                   />
                 </el-form-item>
                 <el-form-item
-                  v-if="form.useShortUrl && form.shortUrlServer === 'yourls'"
+                  v-if="formOfSetting.useShortUrl && formOfSetting.shortUrlServer === 'yourls'"
                   :label="$T('SETTINGS_SHORT_URL_YOURLS_SIGNATURE')"
                 >
                   <el-input
-                    v-model="form.yourlsSignature"
+                    v-model="formOfSetting.yourlsSignature"
                     size="small"
                     style="width: 50%"
                     :placeholder="$T('SETTINGS_SHORT_URL_YOURLS_SIGNATURE')"
-                    @change="handleYourlsSignatureChange"
                   />
                 </el-form-item>
                 <el-form-item
-                  v-if="form.useShortUrl && form.shortUrlServer === 'cf_worker'"
+                  v-if="formOfSetting.useShortUrl && formOfSetting.shortUrlServer === 'cf_worker'"
                   :label="$T('SETTINGS_SHORT_URL_CF_WORKER_HOST')"
                 >
                   <el-input
-                    v-model="form.cfWorkerHost"
+                    v-model="formOfSetting.cfWorkerHost"
                     size="small"
                     style="width: 50%"
                     :placeholder="$T('SETTINGS_SHORT_URL_CF_WORKER_HOST')"
-                    @change="handleCfWorkerHostChange"
                   />
                 </el-form-item>
                 <el-form-item
                   :label="$T('SETTINGS_ENCODE_OUTPUT_URL')"
                 >
                   <el-switch
-                    v-model="form.encodeOutputURL"
+                    v-model="formOfSetting.encodeOutputURL"
                     :active-text="$T('SETTINGS_OPEN')"
                     :inactive-text="$T('SETTINGS_CLOSE')"
-                    @change="handleEncodeOutputURL"
                   />
                 </el-form-item>
                 <el-form-item>
@@ -562,20 +544,18 @@
                     </el-row>
                   </template>
                   <el-switch
-                    v-model="form.useBuiltinClipboard"
+                    v-model="formOfSetting.useBuiltinClipboard"
                     :active-text="$T('SETTINGS_OPEN')"
                     :inactive-text="$T('SETTINGS_CLOSE')"
-                    @change="useBuiltinClipboardChange"
                   />
                 </el-form-item>
                 <el-form-item
                   :label="$T('SETTINGS_WATCH_CLIPBOARD')"
                 >
                   <el-switch
-                    v-model="form.isAutoListenClipboard"
+                    v-model="formOfSetting.isAutoListenClipboard"
                     :active-text="$T('SETTINGS_OPEN')"
                     :inactive-text="$T('SETTINGS_CLOSE')"
-                    @change="handleIsAutoListenClipboard"
                   />
                 </el-form-item>
                 <el-form-item
@@ -583,7 +563,7 @@
                   :label="$T('CHOOSE_SHOWED_PICBED')"
                 >
                   <el-checkbox-group
-                    v-model="form.showPicBedList"
+                    v-model="formOfSetting.showPicBedList"
                     @change="handleShowPicBedListChange"
                   >
                     <el-checkbox
@@ -683,7 +663,7 @@
                   :label="$T('SETTINGS_SET_SERVER_AES_KEY')"
                 >
                   <el-input
-                    v-model.trim="form.aesPassword"
+                    v-model.trim="formOfSetting.aesPassword"
                     type="input"
                     :placeholder="$T('SETTINGS_SET_SERVER_AES_KEY')"
                     size="small"
@@ -728,10 +708,9 @@
                   :label="$T('SETTINGS_OPEN_UPDATE_HELPER')"
                 >
                   <el-switch
-                    v-model="form.updateHelper"
+                    v-model="formOfSetting.showUpdateTip"
                     :active-text="$T('SETTINGS_OPEN')"
                     :inactive-text="$T('SETTINGS_CLOSE')"
-                    @change="updateHelperChange"
                   />
                 </el-form-item>
               </el-form>
@@ -751,7 +730,7 @@
       <el-form
         ref="$customLink"
         label-position="top"
-        :model="customLink"
+        :model="formOfSetting.customLink"
         :rules="rules"
         size="small"
       >
@@ -766,7 +745,7 @@
             {{ $T('SETTINGS_TIPS_PLACEHOLDER_EXTNAME') }}
           </div>
           <el-input
-            v-model="customLink.value"
+            v-model="formOfSetting.customLink"
             class="align-center"
             :autofocus="true"
           />
@@ -802,7 +781,7 @@
     >
       <el-form
         label-position="right"
-        :model="customLink"
+        :model="formOfSetting.customLink"
         label-width="120px"
       >
         <el-form-item
@@ -810,6 +789,7 @@
         >
           <el-input
             v-model="proxy"
+            clearable
             :autofocus="true"
             :placeholder="`${$T('SETTINGS_TIPS_SUCH_AS')}：http://127.0.0.1:1080`"
           />
@@ -818,8 +798,8 @@
           :label="$T('SETTINGS_PLUGIN_INSTALL_PROXY')"
         >
           <el-input
-            v-model="npmProxy"
-            :autofocus="true"
+            v-model="formOfSetting.proxy"
+            clearable
             :placeholder="`${$T('SETTINGS_TIPS_SUCH_AS')}：http://127.0.0.1:1080`"
           />
         </el-form-item>
@@ -827,27 +807,12 @@
           :label="$T('SETTINGS_PLUGIN_INSTALL_MIRROR')"
         >
           <el-input
-            v-model="npmRegistry"
-            :autofocus="true"
+            v-model="formOfSetting.registry"
+            clearable
             :placeholder="`${$T('SETTINGS_TIPS_SUCH_AS')}：https://registry.npmmirror.com`"
           />
         </el-form-item>
       </el-form>
-      <template #footer>
-        <el-button
-          round
-          @click="cancelProxy"
-        >
-          {{ $T('CANCEL') }}
-        </el-button>
-        <el-button
-          type="primary"
-          round
-          @click="confirmProxy"
-        >
-          {{ $T('CONFIRM') }}
-        </el-button>
-      </template>
     </el-dialog>
     <el-dialog
       v-model="mainWindowSizeVisible"
@@ -860,14 +825,14 @@
     >
       <el-form
         label-position="right"
-        :model="customLink"
+        :model="formOfSetting.customLink"
         label-width="120px"
       >
         <el-form-item
           :label="$T('SETTINGS_MAIN_WINDOW_SIZE_WIDTH')"
         >
           <el-input
-            v-model="mainWindowWidth"
+            v-model="formOfSetting.mainWindowWidth"
             :autofocus="true"
             :placeholder="$T('SETTINGS_MAIN_WINDOW_WIDTH_HINT')"
           />
@@ -876,7 +841,7 @@
           :label="$T('SETTINGS_MAIN_WINDOW_SIZE_HEIGHT')"
         >
           <el-input
-            v-model="mainWindowHeight"
+            v-model="formOfSetting.mainWindowHeight"
             :autofocus="true"
             :placeholder="$T('SETTINGS_MAIN_WINDOW_HEIGHT_HINT')"
           />
@@ -1089,7 +1054,7 @@
           :label="$T('SETTINGS_LOG_LEVEL')"
         >
           <el-select
-            v-model="form.logLevel"
+            v-model="formOfSetting.logLevel"
             multiple
             collapse-tags
             style="width: 100%;"
@@ -1109,7 +1074,7 @@
           :label="`${$T('SETTINGS_LOG_FILE_SIZE')} (MB)`"
         >
           <el-input-number
-            v-model="form.logFileSizeLimit"
+            v-model="formOfSetting.logFileSizeLimit"
             style="width: 100%;"
             :placeholder="`${$T('SETTINGS_TIPS_SUCH_AS')}：10`"
             :controls="false"
@@ -1182,10 +1147,9 @@
             :label="$T('SETTINGS_SET_SERVER_KEY')"
           >
             <el-input
-              v-model="form.serverKey"
+              v-model="formOfSetting.serverKey"
               type="input"
               :placeholder="$T('SETTINGS_TIP_PLACEHOLDER_KEY')"
-              @change="handleServerKeyChange"
             />
           </el-form-item>
         </template>
@@ -1228,28 +1192,26 @@
           :label="$T('SETTINGS_SET_ENABLE_WEB_SERVER')"
         >
           <el-switch
-            v-model="form.enableWebServer"
+            v-model="formOfSetting.enableWebServer"
             :active-text="$T('SETTINGS_OPEN')"
             :inactive-text="$T('SETTINGS_CLOSE')"
-            @change="handleEnableWebServerChange"
           />
         </el-form-item>
-        <template v-if="form.enableWebServer">
+        <template v-if="formOfSetting.enableWebServer">
           <el-form-item
             :label="$T('SETTINGS_SET_WEB_SERVER_HOST')"
           >
             <el-input
-              v-model="form.webServerHost"
+              v-model="formOfSetting.webServerHost"
               type="input"
               :placeholder="$T('SETTINGS_TIP_PLACEHOLDER_WEB_HOST')"
-              @change="handleWebServerHostChange"
             />
           </el-form-item>
           <el-form-item
             :label="$T('SETTINGS_SET_WEB_SERVER_PORT')"
           >
             <el-input-number
-              v-model="form.webServerPort"
+              v-model="formOfSetting.webServerPort"
               :min="1"
               :max="65535"
               :placeholder="$T('SETTINGS_TIP_PLACEHOLDER_WEB_PORT')"
@@ -1260,10 +1222,9 @@
             :label="$T('SETTINGS_SET_WEB_SERVER_PATH')"
           >
             <el-input
-              v-model="form.webServerPath"
+              v-model="formOfSetting.webServerPath"
               type="input"
               :placeholder="$T('SETTINGS_SET_WEB_SERVER_PATH')"
-              @change="handleWebServerPathChange"
             />
           </el-form-item>
         </template>
@@ -1297,9 +1258,9 @@
           >
             <el-option
               v-for="typeitem of syncType"
-              :key="typeitem.value"
-              :label="typeitem.label"
-              :value="typeitem.value"
+              :key="typeitem"
+              :label="typeitem.slice(0, 1).toUpperCase() + typeitem.slice(1)"
+              :value="typeitem"
             />
           </el-select>
         </el-form-item>
@@ -1314,39 +1275,14 @@
           />
         </el-form-item>
         <el-form-item
-          :label="$T(`SETTINGS_SYNC_CONFIG_${sync.type.toUpperCase()}_USERNAME` as any)"
+          v-for="inputItem in ['username', 'repo', 'branch', 'token']"
+          :key="inputItem"
+          :label="$T(`SETTINGS_SYNC_CONFIG_${sync.type.toUpperCase()}_${inputItem.toUpperCase()}` as any)"
         >
           <el-input
-            v-model.trim="sync.username"
+            v-model.trim="sync[inputItem as any]"
             type="input"
-            :placeholder="$T(`SETTINGS_SYNC_CONFIG_${sync.type.toUpperCase()}_USERNAME_PLACEHOLDER` as any)"
-          />
-        </el-form-item>
-        <el-form-item
-          :label="$T(`SETTINGS_SYNC_CONFIG_${sync.type.toUpperCase()}_REPO` as any)"
-        >
-          <el-input
-            v-model.trim="sync.repo"
-            type="input"
-            :placeholder="$T(`SETTINGS_SYNC_CONFIG_${sync.type.toUpperCase()}_REPO_PLACEHOLDER` as any)"
-          />
-        </el-form-item>
-        <el-form-item
-          :label="$T(`SETTINGS_SYNC_CONFIG_${sync.type.toUpperCase()}_BRANCH` as any)"
-        >
-          <el-input
-            v-model.trim="sync.branch"
-            type="input"
-            :placeholder="$T(`SETTINGS_SYNC_CONFIG_${sync.type.toUpperCase()}_BRANCH_PLACEHOLDER` as any)"
-          />
-        </el-form-item>
-        <el-form-item
-          :label="$T(`SETTINGS_SYNC_CONFIG_${sync.type.toUpperCase()}_TOKEN` as any)"
-        >
-          <el-input
-            v-model.trim="sync.token"
-            type="input"
-            :placeholder="$T(`SETTINGS_SYNC_CONFIG_${sync.type.toUpperCase()}_TOKEN_PLACEHOLDER` as any)"
+            :placeholder="$T(`SETTINGS_SYNC_CONFIG_${sync.type.toUpperCase()}_${inputItem.toUpperCase()}_PLACEHOLDER` as any)"
           />
         </el-form-item>
         <el-form-item
@@ -1395,28 +1331,14 @@
         >
           <el-button-group>
             <el-button
+              v-for="item in syncTaskList.slice(0, 3)"
+              :key="item.task"
               type="primary"
               plain
               size="small"
-              @click="uploadCommonConfig"
+              @click="syncTaskFn(item.task, item.number)"
             >
-              {{ $T('SETTINGS_SYNC_COMMON_CONFIG') }}
-            </el-button>
-            <el-button
-              type="primary"
-              plain
-              size="small"
-              @click="uploadManageConfig"
-            >
-              {{ $T('SETTINGS_SYNC_MANAGE_CONFIG') }}
-            </el-button>
-            <el-button
-              type="warning"
-              plain
-              size="small"
-              @click="uploadAll"
-            >
-              {{ $T('SETTINGS_SYNC_UPLOAD_ALL') }}
+              {{ item.label }}
             </el-button>
           </el-button-group>
         </el-form-item>
@@ -1425,28 +1347,14 @@
         >
           <el-button-group>
             <el-button
+              v-for="item in syncTaskList.slice(3)"
+              :key="item.task"
               type="primary"
-              size="small"
               plain
-              @click="downloadCommonConfig"
-            >
-              {{ $T('SETTINGS_SYNC_COMMON_CONFIG') }}
-            </el-button>
-            <el-button
-              type="primary"
               size="small"
-              plain
-              @click="downloadManageConfig"
+              @click="syncTaskFn(item.task, item.number)"
             >
-              {{ $T('SETTINGS_SYNC_MANAGE_CONFIG') }}
-            </el-button>
-            <el-button
-              type="warning"
-              size="small"
-              plain
-              @click="downloadAll"
-            >
-              {{ $T('SETTINGS_SYNC_DOWNLOAD_ALL') }}
+              {{ item.label }}
             </el-button>
           </el-button-group>
         </el-form-item>
@@ -1479,7 +1387,7 @@ import { i18nManager, T as $T } from '@/i18n/index'
 import { enforceNumber } from '~/universal/utils/common'
 import { getLatestVersion } from '#/utils/getLatestVersion'
 import { compare } from 'compare-versions'
-import { computed, onBeforeMount, onBeforeUnmount, reactive, ref, toRaw } from 'vue'
+import { computed, onBeforeMount, onBeforeUnmount, reactive, ref, toRaw, watch } from 'vue'
 import { getConfig, saveConfig, sendRPC, sendToMain } from '@/utils/dataSender'
 import { useRouter } from 'vue-router'
 import { SHORTKEY_PAGE } from '@/router/config'
@@ -1489,7 +1397,7 @@ import { buildInRenameFormatTable } from '../manage/utils/common'
 import { configPaths, ISartModeValues } from '~/universal/utils/configPaths'
 import ImageProcessSetting from '@/components/ImageProcessSetting.vue'
 
-const imageProcessDialogVisible = ref(false)
+const $router = useRouter()
 const activeName = ref<'system' | 'syncAndConfigure' | 'upload' | 'advanced' | 'upadte'>('system')
 
 const shortUrlServerList = [{
@@ -1503,32 +1411,17 @@ const shortUrlServerList = [{
 {
   label: 'xyTom/Url-Shorten-Worker',
   value: 'cf_worker'
-}
-]
+}]
 
 const languageList = i18nManager.languageList.map(item => ({
   label: item.label,
   value: item.value
 }))
 
-const startModeList = [
-  {
-    label: $T('SETTINGS_START_MODE_QUIET'),
-    value: ISartMode.QUIET
-  },
-  {
-    label: $T('SETTINGS_START_MODE_MINI'),
-    value: ISartMode.MINI
-  },
-  {
-    label: $T('SETTINGS_START_MODE_NO_TRAY'),
-    value: ISartMode.NO_TRAY
-  },
-  {
-    label: $T('SETTINGS_START_MODE_MAIN'),
-    value: ISartMode.MAIN
-  }
-]
+const startModeList = Object.values(ISartMode).map(item => ({
+  label: $T(`SETTINGS_START_MODE_${item.toUpperCase().replace(/_/g, '')}` as any),
+  value: item
+}))
 
 const manualPageOpenList = [{
   label: $T('MANUAL_PAGE_OPEN_BY_BUILD_IN'),
@@ -1537,8 +1430,7 @@ const manualPageOpenList = [{
 {
   label: $T('MANUAL_PAGE_OPEN_BY_BROWSER'),
   value: 'browser'
-}
-]
+}]
 
 const picBed = ref<IPicBedType[]>([])
 
@@ -1551,9 +1443,9 @@ const customLinkRule = (_: any, value: string, callback: (arg0?: Error) => void)
     return callback()
   }
 }
-const $router = useRouter()
-const form = reactive<ISettingForm>({
-  updateHelper: true,
+
+const formOfSetting = ref<IStringKeyMap>({
+  showUpdateTip: true,
   showPicBedList: [],
   autoStart: false,
   rename: false,
@@ -1564,7 +1456,7 @@ const form = reactive<ISettingForm>({
   autoCloseMiniWindow: false,
   autoCloseMainWindow: false,
   logLevel: ['all'],
-  autoCopyUrl: true,
+  autoCopy: true,
   useBuiltinClipboard: true,
   logFileSizeLimit: 10,
   deleteCloudFile: false,
@@ -1583,11 +1475,33 @@ const form = reactive<ISettingForm>({
   cfWorkerHost: '',
   deleteLocalFile: false,
   serverKey: '',
-  aesPassword: '',
+  aesPassword: 'PicList-aesPassword',
   enableWebServer: false,
   webServerHost: '0.0.0.0',
   webServerPort: 37777,
-  webServerPath: ''
+  webServerPath: '',
+  customLink: '![$fileName]($url)',
+  registry: '',
+  proxy: '',
+  mainWindowWidth: 1200,
+  mainWindowHeight: 800
+})
+const proxy = ref('')
+const formKeys = Object.keys(formOfSetting.value)
+const autoWatchKeys = ['showUpdateTip', 'autoImport', 'autoImportPicBed', 'useBuiltinClipboard', 'isAutoListenClipboard', 'deleteCloudFile', 'deleteLocalFile', 'rename', 'autoRename', 'enableWebServer', 'webServerHost', 'webServerPath', 'serverKey', 'uploadNotification', 'uploadResultNotification', 'autoCloseMainWindow', 'autoCloseMiniWindow', 'isCustomMiniIcon', 'c1nToken', 'yourlsDomain', 'yourlsSignature', 'cfWorkerHost', 'registry', 'proxy', 'autoCopy', 'encodeOutputURL', 'useShortUrl']
+
+autoWatchKeys.forEach(key => {
+  watch(() => formOfSetting.value[key], (value) => {
+    saveConfig({
+      [`settings.${key}`]: value
+    })
+  })
+})
+
+watch(proxy, (value) => {
+  saveConfig({
+    'picBed.proxy': value
+  })
 })
 
 const valueToOptionItem = (value: any, list: { label: string, value: any }[]) => {
@@ -1609,18 +1523,10 @@ const upDownConfigVisible = ref(false)
 const proxyVisible = ref(false)
 const mainWindowSizeVisible = ref(false)
 const advancedRenameVisible = ref(false)
+const imageProcessDialogVisible = ref(false)
 
-const customLink = reactive({
-  value: '![$fileName]($url)'
-})
-
-const mainWindowWidth = ref(1200)
-const mainWindowHeight = ref(800)
 const rawPicGoSize = ref(false)
 
-const proxy = ref('')
-const npmRegistry = ref('')
-const npmProxy = ref('')
 const rules = reactive<FormRules>({
   value: [
     { validator: customLinkRule, trigger: 'blur' }
@@ -1647,7 +1553,7 @@ const advancedRename = ref({
   format: '{filename}'
 })
 
-const sync = ref({
+const sync = ref<any>({
   type: 'github',
   username: '',
   repo: '',
@@ -1658,20 +1564,7 @@ const sync = ref({
   interval: 60
 })
 
-const syncType = [
-  {
-    label: 'GitHub',
-    value: 'github'
-  },
-  {
-    label: 'Gitee',
-    value: 'gitee'
-  },
-  {
-    label: 'Gitea',
-    value: 'gitea'
-  }
-]
+const syncType = ['github', 'gitee', 'gitea']
 
 async function cancelSyncSetting () {
   syncVisible.value = false
@@ -1701,9 +1594,8 @@ const os = ref('')
 const needUpdate = computed(() => {
   if (latestVersion.value) {
     return compareVersion2Update(version, latestVersion.value)
-  } else {
-    return false
   }
+  return false
 })
 
 onBeforeMount(() => {
@@ -1714,80 +1606,45 @@ onBeforeMount(() => {
 })
 
 async function initData () {
-  const config = (await getConfig<IConfig>())!
-  if (config !== undefined) {
-    const settings = config.settings || {}
-    const picBed = config.picBed
-    form.updateHelper = settings.showUpdateTip ?? true
-    form.autoStart = settings.autoStart || false
-    form.rename = settings.rename || false
-    form.autoRename = settings.autoRename || false
-    form.uploadNotification = settings.uploadNotification || false
-    form.uploadResultNotification = settings.uploadResultNotification ?? true
-    form.miniWindowOntop = settings.miniWindowOntop || false
-    form.autoCloseMiniWindow = settings.autoCloseMiniWindow || false
-    form.autoCloseMainWindow = settings.autoCloseMainWindow || false
-    form.logLevel = initArray(settings.logLevel || [], ['all'])
-    form.autoCopyUrl = settings.autoCopy ?? true
-    form.useBuiltinClipboard = settings.useBuiltinClipboard ?? true
-    form.isAutoListenClipboard = settings.isAutoListenClipboard || false
-    form.encodeOutputURL = settings.encodeOutputURL || false
-    form.deleteCloudFile = settings.deleteCloudFile || false
-    form.autoImport = settings.autoImport || false
-    form.autoImportPicBed = initArray(settings.autoImportPicBed || [], [])
-    form.isCustomMiniIcon = settings.isCustomMiniIcon || false
-    form.customMiniIcon = settings.customMiniIcon || ''
-    form.isHideDock = settings.isHideDock || false
-    form.useShortUrl = settings.useShortUrl || false
-    form.shortUrlServer = settings.shortUrlServer || 'c1n'
-    form.c1nToken = settings.c1nToken || ''
-    form.yourlsDomain = settings.yourlsDomain || ''
-    form.yourlsSignature = settings.yourlsSignature || ''
-    form.cfWorkerHost = settings.cfWorkerHost || ''
-    form.deleteLocalFile = settings.deleteLocalFile || false
-    form.serverKey = settings.serverKey || ''
-    form.aesPassword = settings.aesPassword || 'PicList-aesPassword'
-    form.enableWebServer = settings.enableWebServer || false
-    form.webServerHost = settings.webServerHost || '0.0.0.0'
-    form.webServerPort = settings.webServerPort || 37777
-    form.webServerPath = settings.webServerPath || ''
-    currentLanguage.value = valueToOptionItem(settings.language || 'zh-CN', languageList)
-    currentStartMode.value = valueToOptionItem(settings.startMode || ISartMode.QUIET, startModeList)
-    currentManualPageOpen.value = valueToOptionItem(settings.manualPageOpen || 'window', manualPageOpenList)
-    currentShortUrlServer.value = valueToOptionItem(settings.shortUrlServer || 'c1n', shortUrlServerList)
-    customLink.value = settings.customLink || '![$fileName]($url)'
-    proxy.value = picBed.proxy || ''
-    npmRegistry.value = settings.registry || ''
-    npmProxy.value = settings.proxy || ''
-    mainWindowWidth.value = settings.mainWindowWidth || 1200
-    mainWindowHeight.value = settings.mainWindowHeight || 800
-    server.value = settings.server || {
-      port: 36677,
-      host: '0.0.0.0',
-      enable: true
-    }
-    advancedRename.value = config.buildIn?.rename || {
-      enable: false,
-      format: '{filename}'
-    }
-    if (advancedRename.value.enable) {
-      form.autoRename = false
-      saveConfig({
-        [configPaths.settings.autoRename]: false
-      })
-    }
-    sync.value = settings.sync || {
-      type: 'github',
-      username: '',
-      repo: '',
-      branch: '',
-      token: '',
-      endpoint: '',
-      proxy: '',
-      interval: 60
-    }
-    form.logFileSizeLimit = enforceNumber(settings.logFileSizeLimit) || 10
+  const config = (await getConfig<IConfig>()) || {} as IConfig
+  const settings = config.settings || {}
+  const picBed = config.picBed
+  formKeys.forEach(key => {
+    formOfSetting.value[key] = settings[key] ?? formOfSetting.value[key]
+  })
+  formOfSetting.value.logLevel = initArray(settings.logLevel || [], ['all'])
+  formOfSetting.value.autoImportPicBed = initArray(settings.autoImportPicBed || [], [])
+  currentLanguage.value = valueToOptionItem(settings.language || 'zh-CN', languageList)
+  currentStartMode.value = valueToOptionItem(settings.startMode || ISartMode.QUIET, startModeList)
+  currentManualPageOpen.value = valueToOptionItem(settings.manualPageOpen || 'window', manualPageOpenList)
+  currentShortUrlServer.value = valueToOptionItem(settings.shortUrlServer || 'c1n', shortUrlServerList)
+  proxy.value = picBed.proxy || ''
+  server.value = settings.server || {
+    port: 36677,
+    host: '0.0.0.0',
+    enable: true
   }
+  advancedRename.value = config.buildIn?.rename || {
+    enable: false,
+    format: '{filename}'
+  }
+  if (advancedRename.value.enable) {
+    formOfSetting.value.autoRename = false
+    saveConfig({
+      [configPaths.settings.autoRename]: false
+    })
+  }
+  sync.value = settings.sync || {
+    type: 'github',
+    username: '',
+    repo: '',
+    branch: '',
+    token: '',
+    endpoint: '',
+    proxy: '',
+    interval: 60
+  }
+  formOfSetting.value.logFileSizeLimit = enforceNumber(settings.logFileSizeLimit) || 10
 }
 
 function initArray (arrayT: string | string[], defaultValue: string[]) {
@@ -1801,9 +1658,9 @@ function initArray (arrayT: string | string[], defaultValue: string[]) {
   return arrayT
 }
 
-function getPicBeds (event: Event, picBeds: IPicBedType[]) {
+function getPicBeds (_: Event, picBeds: IPicBedType[]) {
   picBed.value = picBeds
-  form.showPicBedList = picBed.value.map(item => {
+  formOfSetting.value.showPicBedList = picBed.value.map(item => {
     if (item.visible) {
       return item.name
     }
@@ -1815,6 +1672,12 @@ function openFile (file: string) {
   sendToMain(PICGO_OPEN_FILE, file)
 }
 
+function handleManualPageOpenChange (val: string) {
+  saveConfig({
+    [configPaths.settings.manualPageOpen]: val
+  })
+}
+
 function openDirectory (directory?: string, inStorePath = true) {
   sendToMain(PICGO_OPEN_DIRECTORY, directory, inStorePath)
 }
@@ -1825,29 +1688,18 @@ function openLogSetting () {
 
 async function cancelCustomLink () {
   customLinkVisible.value = false
-  customLink.value = await getConfig<string>(configPaths.settings.customLink) || '![$fileName]($url)'
+  formOfSetting.value.customLink = await getConfig<string>(configPaths.settings.customLink) || '![$fileName]($url)'
 }
 
 function confirmCustomLink () {
   $customLink.value?.validate((valid: boolean) => {
     if (valid) {
-      saveConfig(configPaths.settings.customLink, customLink.value)
+      saveConfig(configPaths.settings.customLink, formOfSetting.value.customLink)
       customLinkVisible.value = false
-      sendToMain('updateCustomLink')
     }
   })
 }
 
-function handleEncodeOutputURL (val: ICheckBoxValueType) {
-  saveConfig(configPaths.settings.encodeOutputURL, val)
-  const successNotification = new Notification($T('SETTINGS_ENCODE_OUTPUT_URL'), {
-    body: $T('TIPS_SET_SUCCEED')
-  })
-  successNotification.onclick = () => {
-    return true
-  }
-}
-
 async function handleCancelAdvancedRename () {
   advancedRenameVisible.value = false
   advancedRename.value = toRaw((await getConfig<any>(configPaths.buildIn.rename)) || {
@@ -1859,36 +1711,10 @@ async function handleCancelAdvancedRename () {
 function handleSaveAdvancedRename () {
   saveConfig(configPaths.buildIn.rename, toRaw(advancedRename.value))
   if (advancedRename.value.enable) {
-    form.autoRename = false
+    formOfSetting.value.autoRename = false
     saveConfig(configPaths.settings.autoRename, false)
   }
   advancedRenameVisible.value = false
-  const successNotification = new Notification($T('SETTINGS_ADVANCED_RENAME'), {
-    body: $T('TIPS_SET_SUCCEED')
-  })
-  successNotification.onclick = () => {
-    return true
-  }
-}
-
-async function cancelProxy () {
-  proxyVisible.value = false
-  proxy.value = await getConfig<string>(configPaths.picBed.proxy) || ''
-}
-
-function confirmProxy () {
-  proxyVisible.value = false
-  saveConfig({
-    [configPaths.picBed.proxy]: proxy.value,
-    [configPaths.settings.proxy]: npmProxy.value,
-    [configPaths.settings.registry]: npmRegistry.value
-  })
-  const successNotification = new Notification($T('SETTINGS_SET_PROXY_AND_MIRROR'), {
-    body: $T('TIPS_SET_SUCCEED')
-  })
-  successNotification.onclick = () => {
-    return true
-  }
 }
 
 function handleMigrateFromPicGo () {
@@ -1908,36 +1734,16 @@ function handleMigrateFromPicGo () {
   })
 }
 
-function updateHelperChange (val: ICheckBoxValueType) {
-  saveConfig(configPaths.settings.showUpdateTip, val)
-}
-
-function autoImportChange (val: ICheckBoxValueType) {
-  saveConfig(configPaths.settings.autoImport, val)
-}
-
-function handleAutoImportPicBedChange (val: string[]) {
-  saveConfig(configPaths.settings.autoImportPicBed, val)
-}
-
 function handleHideDockChange (val: ICheckBoxValueType) {
   if (val && currentStartMode.value.value === ISartMode.NO_TRAY) {
     ElMessage.warning($T('SETTINGS_ISHIDEDOCK_TIPS'))
-    form.isHideDock = false
+    formOfSetting.value.isHideDock = false
     return
   }
   saveConfig(configPaths.settings.isHideDock, val)
   sendToMain(HIDE_DOCK, val)
 }
 
-function useBuiltinClipboardChange (val: ICheckBoxValueType) {
-  saveConfig(configPaths.settings.useBuiltinClipboard, val)
-}
-
-function handleIsAutoListenClipboard (val: ICheckBoxValueType) {
-  saveConfig(configPaths.settings.isAutoListenClipboard, val)
-}
-
 function handleShowPicBedListChange (val: ICheckBoxValueType[]) {
   const list = picBed.value.map(item => {
     if (!val.includes(item.name)) {
@@ -1958,42 +1764,13 @@ function handleAutoStartChange (val: ICheckBoxValueType) {
   sendToMain('autoStart', val)
 }
 
-function handleDeleteCloudFile (val: ICheckBoxValueType) {
-  saveConfig({
-    [configPaths.settings.deleteCloudFile]: val
-  })
-}
-
-function handleDeleteLocalFile (val: ICheckBoxValueType) {
-  saveConfig({
-    [configPaths.settings.deleteLocalFile]: val
-  })
-}
-
-function handleRename (val: ICheckBoxValueType) {
-  saveConfig({
-    [configPaths.settings.rename]: val
-  })
-}
-
-function handleAutoRename (val: ICheckBoxValueType) {
-  saveConfig({
-    [configPaths.settings.autoRename]: val
-  })
-}
-
 function compareVersion2Update (current: string, latest: string): boolean {
   return compare(current, latest, '<')
 }
 
 async function checkUpdate () {
   checkUpdateVisible.value = true
-  const version = await getLatestVersion()
-  if (version) {
-    latestVersion.value = version
-  } else {
-    latestVersion.value = $T('TIPS_NETWORK_ERROR')
-  }
+  latestVersion.value = await getLatestVersion() || $T('TIPS_NETWORK_ERROR')
 }
 
 function confirmCheckVersion () {
@@ -2007,75 +1784,37 @@ function cancelCheckVersion () {
   checkUpdateVisible.value = false
 }
 
-function handleEnableWebServerChange (val: ICheckBoxValueType) {
-  saveConfig(configPaths.settings.enableWebServer, val)
-}
-
-function handleWebServerHostChange (val: string) {
-  saveConfig(configPaths.settings.webServerHost, val)
-}
-
-function handleWebServerPortChange (val?: number, oldVal?: number) {
+function handleWebServerPortChange (val?: number, _?: number) {
   saveConfig(configPaths.settings.webServerPort, Number(val) || 37777)
 }
 
-function handleWebServerPathChange (val: string) {
-  saveConfig(configPaths.settings.webServerPath, val)
-}
-
 function confirmWebServerSetting () {
-  if (form.enableWebServer) {
+  if (formOfSetting.value.enableWebServer) {
     sendToMain('restartWebServer')
   } else {
     sendToMain('stopWebServer')
   }
 }
 
-function handleServerKeyChange (val: string) {
-  saveConfig(configPaths.settings.serverKey, val)
-}
-
-function handleUploadNotification (val: ICheckBoxValueType) {
-  saveConfig({
-    [configPaths.settings.uploadNotification]: val
-  })
-}
-
-function handleUploadResultNotification (val: ICheckBoxValueType) {
-  saveConfig({
-    [configPaths.settings.uploadResultNotification]: val
-  })
+async function getMainWindowSize () {
+  formOfSetting.value.mainWindowWidth = await getConfig<number>(configPaths.settings.mainWindowWidth) || 1200
+  formOfSetting.value.mainWindowHeight = await getConfig<number>(configPaths.settings.mainWindowHeight) || 800
 }
 
 async function cancelWindowSize () {
   mainWindowSizeVisible.value = false
-  mainWindowWidth.value = await getConfig<number>(configPaths.settings.mainWindowWidth) || 1200
-  mainWindowHeight.value = await getConfig<number>(configPaths.settings.mainWindowHeight) || 800
+  await getMainWindowSize()
 }
 
 async function confirmWindowSize () {
   mainWindowSizeVisible.value = false
-  const width = enforceNumber(mainWindowWidth.value)
-  const height = enforceNumber(mainWindowHeight.value)
+  const width = enforceNumber(formOfSetting.value.mainWindowWidth)
+  const height = enforceNumber(formOfSetting.value.mainWindowHeight)
   saveConfig({
     [configPaths.settings.mainWindowWidth]: rawPicGoSize.value ? 800 : width < 100 ? 100 : width,
     [configPaths.settings.mainWindowHeight]: rawPicGoSize.value ? 450 : height < 100 ? 100 : height
   })
-
-  const successNotification = new Notification($T('SETTINGS_MAIN_WINDOW_SIZE'), {
-    body: $T('TIPS_NEED_RELOAD')
-  })
-  successNotification.onclick = () => {
-    return true
-  }
-}
-
-function handleAutoCloseMainWindowChange (val: ICheckBoxValueType) {
-  saveConfig(configPaths.settings.autoCloseMainWindow, val)
-}
-
-function handleAutoCloseMiniWindowChange (val: ICheckBoxValueType) {
-  saveConfig(configPaths.settings.autoCloseMiniWindow, val)
+  await getMainWindowSize()
 }
 
 function handleMiniWindowOntop (val: ICheckBoxValueType) {
@@ -2086,75 +1825,29 @@ function handleMiniWindowOntop (val: ICheckBoxValueType) {
 async function handleMiniIconPath (_: Event) {
   const result = await invokeToMain('openFileSelectDialog')
   if (result && result[0]) {
-    form.customMiniIcon = result[0]
-    saveConfig(configPaths.settings.customMiniIcon, form.customMiniIcon)
-    ipcRenderer.send('updateMiniIcon', form.customMiniIcon)
-  }
-}
-
-function handleIsCustomMiniIcon (val: ICheckBoxValueType) {
-  saveConfig(configPaths.settings.isCustomMiniIcon, val)
-}
-
-function handleAutoCopyUrl (val: ICheckBoxValueType) {
-  saveConfig(configPaths.settings.autoCopy, val)
-  const successNotification = new Notification($T('SETTINGS_AUTO_COPY_URL_AFTER_UPLOAD'), {
-    body: $T('TIPS_SET_SUCCEED')
-  })
-  successNotification.onclick = () => {
-    return true
-  }
-}
-
-function handleUseShortUrl (val: ICheckBoxValueType) {
-  saveConfig(configPaths.settings.useShortUrl, val)
-  const successNotification = new Notification($T('SETTINGS_SHORT_URL'), {
-    body: $T('TIPS_SET_SUCCEED')
-  })
-  successNotification.onclick = () => {
-    return true
+    formOfSetting.value.customMiniIcon = result[0]
+    saveConfig(configPaths.settings.customMiniIcon, formOfSetting.value.customMiniIcon)
+    ipcRenderer.send('updateMiniIcon', formOfSetting.value.customMiniIcon)
   }
 }
 
 function handleShortUrlServerChange (val: string) {
-  form.shortUrlServer = val
+  formOfSetting.value.shortUrlServer = val
   saveConfig(configPaths.settings.shortUrlServer, val)
 }
 
-function handleC1nTokenChange (val: string) {
-  saveConfig(configPaths.settings.c1nToken, val)
-}
-
-function handleYourlsDomainChange (val: string) {
-  saveConfig(configPaths.settings.yourlsDomain, val)
-}
-
-function handleYourlsSignatureChange (val: string) {
-  saveConfig(configPaths.settings.yourlsSignature, val)
-}
-
-function handleCfWorkerHostChange (val: string) {
-  saveConfig(configPaths.settings.cfWorkerHost, val)
-}
-
 function handleAesPasswordChange (val: string) {
   saveConfig(configPaths.settings.aesPassword, val || 'PicList-aesPassword')
 }
 
 function confirmLogLevelSetting () {
-  if (form.logLevel.length === 0) {
+  if (formOfSetting.value.logLevel.length === 0) {
     return $message.error($T('TIPS_PLEASE_CHOOSE_LOG_LEVEL'))
   }
   saveConfig({
-    [configPaths.settings.logLevel]: form.logLevel,
-    [configPaths.settings.logFileSizeLimit]: form.logFileSizeLimit
+    [configPaths.settings.logLevel]: formOfSetting.value.logLevel,
+    [configPaths.settings.logFileSizeLimit]: formOfSetting.value.logFileSizeLimit
   })
-  const successNotification = new Notification($T('SETTINGS_SET_LOG_FILE'), {
-    body: $T('TIPS_SET_SUCCEED')
-  })
-  successNotification.onclick = () => {
-    return true
-  }
   logFileVisible.value = false
 }
 
@@ -2169,68 +1862,54 @@ async function cancelLogLevelSetting () {
       logLevel = ['all']
     }
   }
-  form.logLevel = logLevel
-  form.logFileSizeLimit = logFileSizeLimit
+  formOfSetting.value.logLevel = logLevel
+  formOfSetting.value.logFileSizeLimit = logFileSizeLimit
 }
 
-function DownMessage (failed: number) {
+function syncMessage (failed: number, taskType: 'UPLOAD' | 'DOWNLOAD') {
   if (failed) {
-    $message.error($T('SETTINGS_SYNC_DOWNLOAD_FAILED', { failed }))
+    $message.error($T(`SETTINGS_SYNC_${taskType}_FAILED`, { failed }))
   } else {
-    $message.success($T('SETTINGS_SYNC_DOWNLOAD_SUCCESS'))
+    $message.success($T(`SETTINGS_SYNC_${taskType}_SUCCESS`))
   }
 }
 
-function upMessage (failed: number) {
-  if (failed) {
-    $message.error($T('SETTINGS_SYNC_UPLOAD_FAILED', { failed }))
-  } else {
-    $message.success($T('SETTINGS_SYNC_UPLOAD_SUCCESS'))
+const syncTaskList = [
+  {
+    task: 'uploadCommonConfig',
+    label: $T('SETTINGS_SYNC_COMMON_CONFIG'),
+    number: 2
+  },
+  {
+    task: 'uploadManageConfig',
+    label: $T('SETTINGS_SYNC_MANAGE_CONFIG'),
+    number: 2
+  },
+  {
+    task: 'uploadAllConfig',
+    label: $T('SETTINGS_SYNC_UPLOAD_ALL'),
+    number: 4
+  },
+  {
+    task: 'downloadCommonConfig',
+    label: $T('SETTINGS_SYNC_COMMON_CONFIG'),
+    number: 2
+  },
+  {
+    task: 'downloadManageConfig',
+    label: $T('SETTINGS_SYNC_MANAGE_CONFIG'),
+    number: 2
+  },
+  {
+    task: 'downloadAllConfig',
+    label: $T('SETTINGS_SYNC_DOWNLOAD_ALL'),
+    number: 4
   }
-}
+]
 
-async function uploadCommonConfig () {
-  const result = await invokeToMain('uploadCommonConfig')
-  const failed = 2 - result
-  upMessage(failed)
-}
-
-async function downloadCommonConfig () {
-  const result = await invokeToMain('downloadCommonConfig')
-  const failed = 2 - result
-  DownMessage(failed)
-}
-
-async function uploadManageConfig () {
-  const result = await invokeToMain('uploadManageConfig')
-  const failed = 2 - result
-  upMessage(failed)
-}
-
-async function downloadManageConfig () {
-  const result = await invokeToMain('downloadManageConfig')
-  const failed = 2 - result
-  DownMessage(failed)
-}
-
-async function uploadAll () {
-  const result = await invokeToMain('uploadAllConfig')
-  const failed = 4 - result
-  if (result === 4) {
-    $message.success($T('SETTINGS_SYNC_UPLOAD_SUCCESS'))
-  } else {
-    $message.error($T('SETTINGS_SYNC_UPLOAD_FAILED') + `(${failed})`)
-  }
-}
-
-async function downloadAll () {
-  const result = await invokeToMain('downloadAllConfig')
-  const failed = 4 - result
-  if (result === 4) {
-    $message.success($T('SETTINGS_SYNC_DOWNLOAD_SUCCESS'))
-  } else {
-    $message.error($T('SETTINGS_SYNC_DOWNLOAD_FAILED') + `(${failed})`)
-  }
+async function syncTaskFn (task: string, number: number) {
+  const failed = number - await invokeToMain(task)
+  syncMessage(failed, task.includes('upload') ? 'UPLOAD' : 'DOWNLOAD')
 }
 
 function confirmServerSetting () {
@@ -2238,12 +1917,6 @@ function confirmServerSetting () {
   saveConfig({
     [configPaths.settings.server]: server.value
   })
-  const successNotification = new Notification($T('SETTINGS_SET_PICGO_SERVER'), {
-    body: $T('TIPS_SET_SUCCEED')
-  })
-  successNotification.onclick = () => {
-    return true
-  }
   serverVisible.value = false
   sendToMain('updateServer')
 }
@@ -2260,7 +1933,7 @@ async function cancelServerSetting () {
 function handleLevelDisabled (val: string) {
   const currentLevel = val
   let flagLevel
-  const result = form.logLevel.some(item => {
+  const result = formOfSetting.value.logLevel.some((item: string) => {
     if (item === 'all' || item === 'none') {
       flagLevel = item
     }
@@ -2270,7 +1943,7 @@ function handleLevelDisabled (val: string) {
     if (currentLevel !== flagLevel) {
       return true
     }
-  } else if (form.logLevel.length > 0) {
+  } else if (formOfSetting.value.logLevel.length > 0) {
     if (val === 'all' || val === 'none') {
       return true
     }
@@ -2288,7 +1961,7 @@ function handleLanguageChange (val: string) {
 
 function handleStartModeChange (val: ISartModeValues) {
   if (val === ISartMode.NO_TRAY) {
-    if (form.isHideDock) {
+    if (formOfSetting.value.isHideDock) {
       ElMessage.warning($T('SETTINGS_ISHIDEDOCK_TIPS'))
       currentStartMode.value = valueToOptionItem(ISartMode.QUIET, startModeList)
       return
@@ -2300,15 +1973,11 @@ function handleStartModeChange (val: ISartModeValues) {
   })
 }
 
-function handleManualPageOpenChange (val: string) {
-  saveConfig({
-    [configPaths.settings.manualPageOpen]: val
-  })
-}
-
 async function goConfigPage () {
   const lang = await getConfig(configPaths.settings.language) || II18nLanguage.ZH_CN
-  const url = lang === II18nLanguage.ZH_CN ? 'https://piclist.cn/configure.html' : 'https://piclist.cn/en/configure.html'
+  const url = lang === II18nLanguage.ZH_CN
+    ? 'https://piclist.cn/configure.html'
+    : 'https://piclist.cn/en/configure.html'
   sendToMain(OPEN_URL, url)
 }