✨ Feature: add config sync module

public/i18n/en.yml

@@ -198,6 +198,32 @@ SETTINGS_ENCODE_OUTPUT_URL: Encode Output(or Copyed) URL
 SETTINGS_WATCH_CLIPBOARD: Watch clipboard when software start
 SETTINGS_SHORT_URL: Use short url
 SETTINGS_DELETE_LOCAL_FILE_AFTER_UPLOAD: Delete local file after upload
+SETTINGS_SYNC_CONFIG: Settings Sync Configuration
+SETTINGS_SYNC_CONFIG_TITLE: Sync Settings
+SETTINGS_SYNC_CONFIG_NOTE: The files to be synchronized include both configuration files and gallery files.
+SETTINGS_SYNC_CONFIG_SELECT_TYPE: Select sync method
+SETTINGS_SYNC_CONFIG_SELECT_FILE: Select files to sync
+SETTINGS_SYNC_CONFIG_SELECT_CONFIG: Configuration files only
+SETTINGS_SYNC_CONFIG_SELECT_GALLERY: Gallery files only
+SETTINGS_SYNC_CONFIG_SELECT_BOTH: Both configuration and gallery files
+SETTINGS_SYNC_CONFIG_GITHUB_USERNAME:  username
+SETTINGS_SYNC_CONFIG_GITEE_USERNAME:  username
+SETTINGS_SYNC_CONFIG_GITHUB_REPO:  repository (private)
+SETTINGS_SYNC_CONFIG_GITEE_REPO:  repository (private)
+SETTINGS_SYNC_CONFIG_GITHUB_BRANCH:  branch
+SETTINGS_SYNC_CONFIG_GITEE_BRANCH:  branch
+SETTINGS_SYNC_CONFIG_GITHUB_TOKEN:  Token
+SETTINGS_SYNC_CONFIG_GITEE_TOKEN:  Token
+SETTINGS_SYNC_CONFIG_PROXY: Proxy
+SETTINGS_SYNC_CONFIG_GITHUB_USERNAME_PLACEHOLDER: Please enter GitHub username
+SETTINGS_SYNC_CONFIG_GITEE_USERNAME_PLACEHOLDER: Please enter Gitee username
+SETTINGS_SYNC_CONFIG_GITHUB_REPO_PLACEHOLDER: Please enter GitHub repository name
+SETTINGS_SYNC_CONFIG_GITEE_REPO_PLACEHOLDER: Please enter Gitee repository name
+SETTINGS_SYNC_CONFIG_GITHUB_BRANCH_PLACEHOLDER: Please enter GitHub branch name
+SETTINGS_SYNC_CONFIG_GITEE_BRANCH_PLACEHOLDER: Please enter Gitee branch name
+SETTINGS_SYNC_CONFIG_GITHUB_TOKEN_PLACEHOLDER: Please enter GitHub Token
+SETTINGS_SYNC_CONFIG_GITEE_TOKEN_PLACEHOLDER: Please enter Gitee Token
+SETTINGS_SYNC_CONFIG_PROXY_PLACEHOLDER: Please enter proxy
 # shortcut-page
 
 BUILTIN_CLIPBOARD_TIPS: Use builtin clipboard function to upload instead of using scripts

public/i18n/zh-CN.yml

@@ -200,6 +200,32 @@ SETTINGS_ENCODE_OUTPUT_URL: 输出（复制） URL 时进行转义
 SETTINGS_WATCH_CLIPBOARD: 软件启动时自动监听剪贴板上传
 SETTINGS_SHORT_URL: 使用短链接
 SETTINGS_DELETE_LOCAL_FILE_AFTER_UPLOAD: 上传后删除本地文件
+SETTINGS_SYNC_CONFIG: 设置配置同步
+SETTINGS_SYNC_CONFIG_TITLE: 同步设置
+SETTINGS_SYNC_CONFIG_NOTE: 同步的文件包括配置文件和相册文件
+SETTINGS_SYNC_CONFIG_SELECT_TYPE: 选择同步方式
+SETTINGS_SYNC_CONFIG_SELECT_FILE: 选择同步文件
+SETTINGS_SYNC_CONFIG_SELECT_CONFIG: 仅配置文件
+SETTINGS_SYNC_CONFIG_SELECT_GALLERY: 仅相册文件
+SETTINGS_SYNC_CONFIG_SELECT_BOTH: 配置文件和相册文件
+SETTINGS_SYNC_CONFIG_GITHUB_USERNAME: GitHub用户名
+SETTINGS_SYNC_CONFIG_GITEE_USERNAME: Gitee用户名
+SETTINGS_SYNC_CONFIG_GITHUB_REPO: 仓库(私有)
+SETTINGS_SYNC_CONFIG_GITEE_REPO: 仓库(私有)
+SETTINGS_SYNC_CONFIG_GITHUB_BRANCH: GitHub分支
+SETTINGS_SYNC_CONFIG_GITEE_BRANCH: Gitee分支
+SETTINGS_SYNC_CONFIG_GITHUB_TOKEN: GitHub Token
+SETTINGS_SYNC_CONFIG_GITEE_TOKEN: Gitee Token
+SETTINGS_SYNC_CONFIG_PROXY: 代理
+SETTINGS_SYNC_CONFIG_GITHUB_USERNAME_PLACEHOLDER: 请输入GitHub用户名
+SETTINGS_SYNC_CONFIG_GITEE_USERNAME_PLACEHOLDER: 请输入Gitee用户名
+SETTINGS_SYNC_CONFIG_GITHUB_REPO_PLACEHOLDER: 请输入GitHub仓库名
+SETTINGS_SYNC_CONFIG_GITEE_REPO_PLACEHOLDER: 请输入Gitee仓库名
+SETTINGS_SYNC_CONFIG_GITHUB_BRANCH_PLACEHOLDER: 请输入GitHub分支名
+SETTINGS_SYNC_CONFIG_GITEE_BRANCH_PLACEHOLDER: 请输入Gitee分支名
+SETTINGS_SYNC_CONFIG_GITHUB_TOKEN_PLACEHOLDER: 请输入GitHub Token
+SETTINGS_SYNC_CONFIG_GITEE_TOKEN_PLACEHOLDER: 请输入Gitee Token
+SETTINGS_SYNC_CONFIG_PROXY_PLACEHOLDER: 请输入代理地址
 # shortcut-page
 
 SHORTCUT_NAME: 快捷键名称

public/i18n/zh-TW.yml

@@ -198,6 +198,33 @@ SETTINGS_ENCODE_OUTPUT_URL: 輸出（複製） URL 時進行轉義
 SETTINGS_WATCH_CLIPBOARD: 軟體啟動時自動監聽剪貼簿上傳
 SETTINGS_SHORT_URL: 使用短網址
 SETTINGS_DELETE_LOCAL_FILE_AFTER_UPLOAD: 上傳後刪除本地檔案
+SETTINGS_SYNC_CONFIG: 設置同步配置
+SETTINGS_SYNC_CONFIG_TITLE: 同步設置
+SETTINGS_SYNC_CONFIG_NOTE: 同步的檔案包括配置檔案和相簿檔案
+SETTINGS_SYNC_CONFIG_SELECT_TYPE: 選擇同步方式
+SETTINGS_SYNC_CONFIG_SELECT_FILE: 選擇同步檔案
+SETTINGS_SYNC_CONFIG_SELECT_CONFIG: 僅配置檔案
+SETTINGS_SYNC_CONFIG_SELECT_GALLERY: 僅相簿檔案
+SETTINGS_SYNC_CONFIG_SELECT_BOTH: 配置檔案和相簿檔案
+SETTINGS_SYNC_CONFIG_GITHUB_USERNAME: 用戶名
+SETTINGS_SYNC_CONFIG_GITEE_USERNAME: 用戶名
+SETTINGS_SYNC_CONFIG_GITHUB_REPO: 儲存庫（私有）
+SETTINGS_SYNC_CONFIG_GITEE_REPO: 儲存庫（私有）
+SETTINGS_SYNC_CONFIG_GITHUB_BRANCH: GitHub 分支
+SETTINGS_SYNC_CONFIG_GITEE_BRANCH: Gitee 分支
+SETTINGS_SYNC_CONFIG_GITHUB_TOKEN: GitHub Token
+SETTINGS_SYNC_CONFIG_GITEE_TOKEN: Gitee Token
+SETTINGS_SYNC_CONFIG_PROXY: 代理
+SETTINGS_SYNC_CONFIG_GITHUB_USERNAME_PLACEHOLDER: 請輸入 GitHub 用戶名
+SETTINGS_SYNC_CONFIG_GITEE_USERNAME_PLACEHOLDER: 請輸入 Gitee 用戶名
+SETTINGS_SYNC_CONFIG_GITHUB_REPO_PLACEHOLDER: 請輸入 GitHub 儲存庫名稱
+SETTINGS_SYNC_CONFIG_GITEE_REPO_PLACEHOLDER: 請輸入 Gitee 儲存庫名稱
+SETTINGS_SYNC_CONFIG_GITHUB_BRANCH_PLACEHOLDER: 請輸入 GitHub 分支名稱
+SETTINGS_SYNC_CONFIG_GITEE_BRANCH_PLACEHOLDER: 請輸入 Gitee 分支名稱
+SETTINGS_SYNC_CONFIG_GITHUB_TOKEN_PLACEHOLDER: 請輸入 GitHub Token
+SETTINGS_SYNC_CONFIG_GITEE_TOKEN_PLACEHOLDER: 請輸入 Gitee Token
+SETTINGS_SYNC_CONFIG_PROXY_PLACEHOLDER: 請輸入代理地址
+
 # shortcut-page
 
 SHORTCUT_NAME: 快捷鍵名稱

src/main.ts

@@ -25,9 +25,6 @@ import 'video.js/dist/video-js.css'
 
 webFrame.setVisualZoomLevelLimits(1, 1)
 
-// do here before vue init
-// handleURLParams()
-
 const app = createApp(App)
 
 app.config.globalProperties.$builtInPicBed = [

src/main/lifeCycle/index.ts

@@ -48,6 +48,7 @@ import clipboardPoll from '../utils/clipboardPoll'
 import path from 'path'
 import { CLIPBOARD_IMAGE_FOLDER } from '~/universal/utils/static'
 import fs from 'fs-extra'
+import { syncInterval } from '../utils/syncSettings'
 const isDevelopment = process.env.NODE_ENV !== 'production'
 
 const handleStartUpFiles = (argv: string[], cwd: string) => {
@@ -201,6 +202,7 @@ class LifeCycle {
       }
       const clipboardDir = path.join(picgo.baseDir, CLIPBOARD_IMAGE_FOLDER)
       fs.ensureDir(clipboardDir)
+      syncInterval()
     }
     app.whenReady().then(readyFunction)
   }

src/main/utils/syncSettings.ts

@@ -0,0 +1,306 @@
+import { app } from 'electron'
+import fs from 'fs-extra'
+import path from 'path'
+import axios from 'axios'
+import db from '~/main/apis/core/datastore'
+import { HttpsProxyAgent } from 'hpagent'
+import { Octokit } from '@octokit/rest'
+import logger from 'apis/core/picgo/logger'
+
+const STORE_PATH = app.getPath('userData')
+
+const configFileNames = [
+  'data.json',
+  'data.bak.json',
+  'manage.json',
+  'manage.bak.json',
+  'piclist-remote-notice.json',
+  'UpDownTaskQueue.json'
+]
+
+function getOctokit (syncConfig: any) {
+  const { token, proxy } = syncConfig
+  return new Octokit({
+    auth: token,
+    request: {
+      agent: proxy
+        ? new HttpsProxyAgent({
+          keepAlive: true,
+          keepAliveMsecs: 1000,
+          rejectUnauthorized: false,
+          proxy: proxy.replace('127.0.0.1', 'localhost'),
+          scheduling: 'lifo'
+        })
+        : undefined
+    }
+  })
+}
+
+function getSyncConfig () {
+  const syncConfig = db.get('settings.sync') || {
+    type: 'github',
+    username: '',
+    repo: '',
+    branch: '',
+    token: '',
+    proxy: ''
+  }
+  return syncConfig
+}
+
+function syncConfigValidator (syncConfig: any) {
+  const { type, file, username, repo, branch, token } = syncConfig
+  return type && file && username && repo && branch && token
+}
+
+async function getModifiedTime (syncConfig: IStringKeyMap, filePath: string) {
+  const { username, repo, branch, token, type } = syncConfig
+  if (type === 'gitee') {
+    const url = `https://gitee.com/api/v5/repos/${username}/${repo}/commits`
+    const res = await axios.get(url, {
+      params: {
+        access_token: token,
+        ref: branch,
+        path: filePath
+      }
+    })
+    const data = res.data
+    if (data.length > 0) {
+      return data[0].commit.committer.date
+    } else {
+      return null
+    }
+  } else {
+    const octokit = getOctokit(syncConfig)
+    try {
+      const res = await octokit.rest.repos.listCommits({
+        owner: username,
+        repo,
+        ref: branch,
+        path: filePath,
+        per_page: 1
+      })
+      if (res.status === 200) {
+        return res.data.length > 0 ? res.data[0].commit.committer?.date : null
+      } else {
+        return null
+      }
+    } catch (error: any) {
+      logger.error(error)
+      return null
+    }
+  }
+}
+
+async function getModifiedTimeOfLocal (filePath: string) {
+  if (!fs.existsSync(filePath)) {
+    return new Date(0)
+  }
+  const stat = await fs.stat(filePath)
+  return stat.mtime
+}
+
+async function compareNewerFile (syncConfig: IStringKeyMap, fileName: string): Promise<'upload' | 'download' | 'update' | undefined> {
+  const localFilePath = path.join(STORE_PATH, fileName)
+  const remoteModifiedTime = await getModifiedTime(syncConfig, fileName)
+  if (remoteModifiedTime === null) {
+    return 'upload'
+  }
+  const localModifiedTime = await getModifiedTimeOfLocal(localFilePath)
+  if (remoteModifiedTime && localModifiedTime) {
+    return Date.parse(remoteModifiedTime) > localModifiedTime.getTime() ? 'download' : 'update'
+  } else {
+    throw new Error('get modified time failed')
+  }
+}
+
+async function uploadLocalToRemote (syncConfig: IStringKeyMap, fileName: string) {
+  const localFilePath = path.join(STORE_PATH, fileName)
+  const { username, repo, branch, token, type } = syncConfig
+  if (type === 'gitee') {
+    const url = `https://gitee.com/api/v5/repos/${username}/${repo}/contents/${fileName}`
+    const res = await axios.post(url, {
+      access_token: token,
+      branch,
+      content: fs.readFileSync(localFilePath, { encoding: 'base64' }),
+      message: `upload ${fileName} from PicList`
+    })
+    return res.status >= 200 && res.status < 300
+  } else {
+    const octokit = getOctokit(syncConfig)
+    try {
+      const res = await octokit.rest.repos.createOrUpdateFileContents({
+        owner: username,
+        repo,
+        path: fileName,
+        message: `upload ${fileName} from PicList`,
+        content: fs.readFileSync(localFilePath, { encoding: 'base64' }),
+        branch
+      })
+      return res.status === 200
+    } catch (error: any) {
+      logger.error(error)
+      return false
+    }
+  }
+}
+
+async function updateLocalToRemote (syncConfig: IStringKeyMap, fileName: string) {
+  const localFilePath = path.join(STORE_PATH, fileName)
+  const { username, repo, branch, token, type } = syncConfig
+  if (type === 'gitee') {
+    const url = `https://gitee.com/api/v5/repos/${username}/${repo}/contents/${fileName}`
+    const shaRes = await axios.get(url, {
+      params: {
+        access_token: token,
+        ref: branch
+      }
+    })
+    if (shaRes.status < 200 || shaRes.status > 300) {
+      return false
+    }
+    const sha = shaRes.data.sha
+    const res = await axios.put(url, {
+      owner: username,
+      repo,
+      path: fileName,
+      message: `update ${fileName} from PicList`,
+      content: fs.readFileSync(localFilePath, { encoding: 'base64' }),
+      branch,
+      sha,
+      access_token: token
+    })
+    if (res.status >= 200 && res.status < 300) {
+      return true
+    }
+    return false
+  } else {
+    const octokit = getOctokit(syncConfig)
+    try {
+      const shaRes = await octokit.rest.repos.getContent({
+        owner: username,
+        repo,
+        path: fileName,
+        ref: branch
+      })
+      if (shaRes.status !== 200) {
+        return false
+      }
+      const data = shaRes.data as any
+      const sha = data.sha
+      const res = await octokit.rest.repos.createOrUpdateFileContents({
+        owner: username,
+        repo,
+        path: fileName,
+        message: `update ${fileName} from PicList`,
+        content: fs.readFileSync(localFilePath, { encoding: 'base64' }),
+        branch,
+        sha
+      })
+      return res.status === 200
+    } catch (error: any) {
+      logger.error(error)
+      return false
+    }
+  }
+}
+
+async function downloadRemoteToLocal (syncConfig: IStringKeyMap, fileName: string) {
+  const localFilePath = path.join(STORE_PATH, fileName)
+  const { username, repo, branch, token, proxy, type } = syncConfig
+  if (type === 'gitee') {
+    const url = `https://gitee.com/api/v5/repos/${username}/${repo}/contents/${fileName}`
+    const res = await axios.get(url, {
+      params: {
+        access_token: token,
+        ref: branch
+      }
+    })
+    if (res.status >= 200 && res.status < 300) {
+      const content = res.data.content
+      await fs.writeFile(localFilePath, Buffer.from(content, 'base64'))
+      return true
+    }
+    return false
+  } else {
+    const octokit = getOctokit(syncConfig)
+    try {
+      const res = await octokit.rest.repos.getContent({
+        owner: username,
+        repo,
+        path: fileName,
+        ref: branch
+      })
+      if (res.status === 200) {
+        const data = res.data as any
+        const downloadUrl = data.download_url
+        const downloadRes = await axios.get(downloadUrl, {
+          httpsAgent: proxy
+            ? new HttpsProxyAgent({
+              keepAlive: true,
+              keepAliveMsecs: 1000,
+              rejectUnauthorized: false,
+              proxy: proxy.replace('127.0.0.1', 'localhost'),
+              scheduling: 'lifo'
+            })
+            : undefined
+        })
+        if (downloadRes.status >= 200 && downloadRes.status < 300) {
+          await fs.writeFile(localFilePath, JSON.stringify(downloadRes.data, null, 2))
+          return true
+        }
+      }
+      return false
+    } catch (error: any) {
+      logger.error(error)
+      return false
+    }
+  }
+}
+
+async function syncFile (syncConfig: IStringKeyMap, fileName: string) {
+  const compareResult = await compareNewerFile(syncConfig, fileName)
+  logger.info(`file ${fileName} compare result: ${compareResult}`)
+  let result = false
+  if (compareResult === 'upload') {
+    result = await uploadLocalToRemote(syncConfig, fileName)
+  } else if (compareResult === 'update') {
+    result = await updateLocalToRemote(syncConfig, fileName)
+  } else if (compareResult === 'download') {
+    result = await downloadRemoteToLocal(syncConfig, fileName)
+  }
+  return result
+}
+
+async function syncAllFiles (syncConfig: IStringKeyMap) {
+  for (const file of configFileNames) {
+    try {
+      const result = await syncFile(syncConfig, file)
+      if (result) {
+        logger.info(`sync file ${file} success`)
+      }
+    } catch (error: any) {
+      logger.error(`sync file ${file} failed`)
+      logger.error(error)
+    }
+  }
+}
+
+async function syncInterval () {
+  const syncConfig = await getSyncConfig()
+  if (!syncConfigValidator(syncConfig)) {
+    return
+  }
+  const syncFunc = async () => {
+    await syncAllFiles(syncConfig)
+    logger.info(`sync all files at ${new Date().toLocaleString()}`)
+  }
+  await syncFunc()
+  setInterval(async () => {
+    syncFunc()
+  }, 1000 * 60 * 10)
+}
+
+export {
+  syncInterval
+}

src/renderer/manage/pages/bucketPage.vue

@@ -19,7 +19,7 @@ ea/*
           v-model="currentCustomUrl"
           :placeholder="$T('MANAGE_BUCKET_PAGE_CUSTOM_URL_SELECT_PLACEHOLDER')"
           style="width: 200px;"
-          @change="handelChangeCustomUrl"
+          @change="handleChangeCustomUrl"
         >
           <el-option
             v-for="item in customUrlList"
@@ -33,7 +33,7 @@ ea/*
           v-model="currentCustomUrl"
           :placeholder="$T('MANAGE_BUCKET_PAGE_CUSTOM_URL_INPUT_PLACEHOLDER')"
           style="width: 200px;"
-          @blur="handelChangeCustomUrl"
+          @blur="handleChangeCustomUrl"
         />
         <el-link
           v-else
@@ -90,7 +90,7 @@ ea/*
       >
         <el-button
           type="text"
-          @click="handelCreateFolder"
+          @click="handleCreateFolder"
         >
           <el-tooltip
             class="item"
@@ -129,7 +129,7 @@ ea/*
         </el-button>
       </div>
       <div
-        @click="handelBatchRenameFile"
+        @click="handleBatchRenameFile"
       >
         <el-button type="text">
           <el-tooltip
@@ -162,7 +162,7 @@ ea/*
                 size="25px"
                 :color="selectedItems.length > 0 ? 'red' : 'gray'"
                 style="margin-left: 10px;"
-                @click="handelBatchCopyLink(manageStore.config.settings.customPasteFormat)"
+                @click="handleBatchCopyLink(manageStore.config.settings.customPasteFormat)"
               >
                 <Link />
               </el-icon>
@@ -171,7 +171,7 @@ ea/*
                   <el-dropdown-item
                     v-for="i in [...linkArray, { key: 'preSignURL', value: 'preSignedUrl' }]"
                     :key="i.key"
-                    @click="handelBatchCopyLink(i.value)"
+                    @click="handleBatchCopyLink(i.value)"
                   >
                     {{ i.key }}
                   </el-dropdown-item>
@@ -180,7 +180,7 @@ ea/*
                   v-for="i in linkArray"
                   v-else
                   :key="i.value+i.key"
-                  @click="handelBatchCopyLink(i.value)"
+                  @click="handleBatchCopyLink(i.value)"
                 >
                   {{ i.key }}
                 </el-dropdown-item>
@@ -202,7 +202,7 @@ ea/*
               size="25px"
               :color="selectedItems.length > 0 ? 'red' : 'gray'"
               style="margin-left: 10px;"
-              @click="handelBatchCopyInfo"
+              @click="handleBatchCopyInfo"
             >
               <Document />
             </el-icon>
@@ -323,7 +323,7 @@ ea/*
           type="warning"
           plain
           style="margin-right: 2px;"
-          @click="handelCancelCheck"
+          @click="handleCancelCheck"
         >
           {{ $T('MANAGE_BUCKET_PAGE_SELECT_NONE') }}
         </el-button>
@@ -354,7 +354,7 @@ ea/*
           plain
           :icon="Download"
           style="margin-right: 2px;"
-          @click="handelBatchDownload"
+          @click="handleBatchDownload"
         >
           {{ `${$T('MANAGE_BUCKET_DOWNLOAD_BTN')}(${selectedItems.filter(item => item.isDir === false).length})` }}
         </el-button>
@@ -363,7 +363,7 @@ ea/*
           size="small"
           type="danger"
           :icon="DeleteFilled"
-          @click="handelBatchDeleteInfo"
+          @click="handleBatchDeleteInfo"
         >
           {{ `${$T('MANAGE_BUCKET_DELETE_BTN')}${selectedItems.length}` }}
         </el-button>
@@ -444,7 +444,7 @@ https://www.baidu.com/img/bd_logo1.png"
         <el-button
           type="primary"
           style="font-size: 12px;font-weight: 500;"
-          @click="handelUploadFromUrl"
+          @click="handleUploadFromUrl"
         >
           {{ $T('MANAGE_BUCKET_URL_UPLOAD_DIALOG_CONFIRM') }}
         </el-button>
@@ -571,7 +571,7 @@ https://www.baidu.com/img/bd_logo1.png"
                     size="20"
                     style="cursor: pointer;"
                     color="crimson"
-                    @click="handelFolderBatchDownload(item)"
+                    @click="handleFolderBatchDownload(item)"
                   >
                     <Download />
                   </el-icon>
@@ -833,7 +833,7 @@ https://www.baidu.com/img/bd_logo1.png"
               type="primary"
               plain
               :icon="Document"
-              @click="handelCopyUploadingTaskInfo"
+              @click="handleCopyUploadingTaskInfo"
             >
               {{ $T('MANAGE_BUCKET_UPLOAD_AREA_COPY_TASK') }}
             </el-button>
@@ -841,7 +841,7 @@ https://www.baidu.com/img/bd_logo1.png"
               type="primary"
               plain
               :icon="DeleteFilled"
-              @click="handelDeleteUploadedTask"
+              @click="handleDeleteUploadedTask"
             >
               {{ $T('MANAGE_BUCKET_UPLOAD_AREA_CLEAR_UPLOADED_TASK') }}
             </el-button>
@@ -849,7 +849,7 @@ https://www.baidu.com/img/bd_logo1.png"
               type="primary"
               plain
               :icon="DeleteFilled"
-              @click="handelDeleteAllUploadedTask"
+              @click="handleDeleteAllUploadedTask"
             >
               {{ $T('MANAGE_BUCKET_UPLOAD_AREA_CLEAR_ALL_TASK') }}
             </el-button>
@@ -886,7 +886,7 @@ https://www.baidu.com/img/bd_logo1.png"
               type="primary"
               plain
               :icon="Document"
-              @click="handelCopyUploadingTaskInfo"
+              @click="handleCopyUploadingTaskInfo"
             >
               {{ $T('MANAGE_BUCKET_UPLOAD_AREA_COPY_TASK') }}
             </el-button>
@@ -894,7 +894,7 @@ https://www.baidu.com/img/bd_logo1.png"
               type="primary"
               plain
               :icon="DeleteFilled"
-              @click="handelDeleteUploadedTask"
+              @click="handleDeleteUploadedTask"
             >
               {{ $T('MANAGE_BUCKET_UPLOAD_AREA_CLEAR_UPLOADED_TASK') }}
             </el-button>
@@ -902,7 +902,7 @@ https://www.baidu.com/img/bd_logo1.png"
               type="primary"
               plain
               :icon="DeleteFilled"
-              @click="handelDeleteAllUploadedTask"
+              @click="handleDeleteAllUploadedTask"
             >
               {{ $T('MANAGE_BUCKET_UPLOAD_AREA_CLEAR_ALL_TASK') }}
             </el-button>
@@ -939,7 +939,7 @@ https://www.baidu.com/img/bd_logo1.png"
               type="primary"
               plain
               :icon="Document"
-              @click="handelCopyUploadingTaskInfo"
+              @click="handleCopyUploadingTaskInfo"
             >
               {{ $T('MANAGE_BUCKET_UPLOAD_AREA_COPY_TASK') }}
             </el-button>
@@ -947,7 +947,7 @@ https://www.baidu.com/img/bd_logo1.png"
               type="primary"
               plain
               :icon="DeleteFilled"
-              @click="handelDeleteUploadedTask"
+              @click="handleDeleteUploadedTask"
             >
               {{ $T('MANAGE_BUCKET_UPLOAD_AREA_CLEAR_UPLOADED_TASK') }}
             </el-button>
@@ -955,7 +955,7 @@ https://www.baidu.com/img/bd_logo1.png"
               type="primary"
               plain
               :icon="DeleteFilled"
-              @click="handelDeleteAllUploadedTask"
+              @click="handleDeleteAllUploadedTask"
             >
               {{ $T('MANAGE_BUCKET_UPLOAD_AREA_CLEAR_ALL_TASK') }}
             </el-button>
@@ -1005,7 +1005,7 @@ https://www.baidu.com/img/bd_logo1.png"
               type="primary"
               plain
               :icon="Document"
-              @click="handelCopyDownloadingTaskInfo"
+              @click="handleCopyDownloadingTaskInfo"
             >
               {{ $T('MANAGE_BUCKET_DOWNLOAD_COPY_TASK') }}
             </el-button>
@@ -1013,7 +1013,7 @@ https://www.baidu.com/img/bd_logo1.png"
               type="primary"
               plain
               :icon="DeleteFilled"
-              @click="handelDeleteDownloadedTask"
+              @click="handleDeleteDownloadedTask"
             >
               {{ $T('MANAGE_BUCKET_DOWNLOAD_CLEAR_DOWNLOADED_TASK') }}
             </el-button>
@@ -1021,7 +1021,7 @@ https://www.baidu.com/img/bd_logo1.png"
               type="primary"
               plain
               :icon="DeleteFilled"
-              @click="handelDeleteAllDownloadedTask"
+              @click="handleDeleteAllDownloadedTask"
             >
               {{ $T('MANAGE_BUCKET_DOWNLOAD_CLEAR_ALL_TASK') }}
             </el-button>
@@ -1029,7 +1029,7 @@ https://www.baidu.com/img/bd_logo1.png"
               type="primary"
               plain
               :icon="Folder"
-              @click="handelOpenDownloadedFolder"
+              @click="handleOpenDownloadedFolder"
             >
               {{ $T('MANAGE_BUCKET_DOWNLOAD_OPEN_FOLDER') }}
             </el-button>
@@ -1066,7 +1066,7 @@ https://www.baidu.com/img/bd_logo1.png"
               type="primary"
               plain
               :icon="Document"
-              @click="handelCopyDownloadingTaskInfo"
+              @click="handleCopyDownloadingTaskInfo"
             >
               {{ $T('MANAGE_BUCKET_DOWNLOAD_COPY_TASK') }}
             </el-button>
@@ -1074,7 +1074,7 @@ https://www.baidu.com/img/bd_logo1.png"
               type="primary"
               plain
               :icon="DeleteFilled"
-              @click="handelDeleteDownloadedTask"
+              @click="handleDeleteDownloadedTask"
             >
               {{ $T('MANAGE_BUCKET_DOWNLOAD_CLEAR_DOWNLOADED_TASK') }}
             </el-button>
@@ -1082,7 +1082,7 @@ https://www.baidu.com/img/bd_logo1.png"
               type="primary"
               plain
               :icon="DeleteFilled"
-              @click="handelDeleteAllDownloadedTask"
+              @click="handleDeleteAllDownloadedTask"
             >
               {{ $T('MANAGE_BUCKET_DOWNLOAD_CLEAR_ALL_TASK') }}
             </el-button>
@@ -1090,7 +1090,7 @@ https://www.baidu.com/img/bd_logo1.png"
               type="primary"
               plain
               :icon="Folder"
-              @click="handelOpenDownloadedFolder"
+              @click="handleOpenDownloadedFolder"
             >
               {{ $T('MANAGE_BUCKET_DOWNLOAD_OPEN_FOLDER') }}
             </el-button>
@@ -1127,7 +1127,7 @@ https://www.baidu.com/img/bd_logo1.png"
               type="primary"
               plain
               :icon="Document"
-              @click="handelCopyDownloadingTaskInfo"
+              @click="handleCopyDownloadingTaskInfo"
             >
               {{ $T('MANAGE_BUCKET_DOWNLOAD_COPY_TASK') }}
             </el-button>
@@ -1135,7 +1135,7 @@ https://www.baidu.com/img/bd_logo1.png"
               type="primary"
               plain
               :icon="DeleteFilled"
-              @click="handelDeleteDownloadedTask"
+              @click="handleDeleteDownloadedTask"
             >
               {{ $T('MANAGE_BUCKET_DOWNLOAD_CLEAR_DOWNLOADED_TASK') }}
             </el-button>
@@ -1143,7 +1143,7 @@ https://www.baidu.com/img/bd_logo1.png"
               type="primary"
               plain
               :icon="DeleteFilled"
-              @click="handelDeleteAllDownloadedTask"
+              @click="handleDeleteAllDownloadedTask"
             >
               {{ $T('MANAGE_BUCKET_DOWNLOAD_CLEAR_ALL_TASK') }}
             </el-button>
@@ -1151,7 +1151,7 @@ https://www.baidu.com/img/bd_logo1.png"
               type="primary"
               plain
               :icon="Folder"
-              @click="handelOpenDownloadedFolder"
+              @click="handleOpenDownloadedFolder"
             >
               {{ $T('MANAGE_BUCKET_DOWNLOAD_OPEN_FOLDER') }}
             </el-button>
@@ -1632,7 +1632,7 @@ function webkitReadDataTransfer (dataTransfer: DataTransfer) {
           })
         }
       })
-      handelUploadFiles(files)
+      handleUploadFiles(files)
       isLoadingUploadPanelFiles.value = false
     }
   }
@@ -1682,7 +1682,7 @@ function webkitReadDataTransfer (dataTransfer: DataTransfer) {
   }
 }
 
-function handelUploadFiles (files: any[]) {
+function handleUploadFiles (files: any[]) {
   const dirObj = {} as any
   files.forEach((item) => {
     if (item.relativePath === item.name) {
@@ -1784,37 +1784,37 @@ function uploadFiles () {
   ipcRenderer.send('uploadBucketFile', configMap.alias, param)
 }
 
-function handelCopyUploadingTaskInfo () {
+function handleCopyUploadingTaskInfo () {
   clipboard.writeText(JSON.stringify(uploadTaskList.value, null, 2))
   ElMessage.success($T('MANAGE_BUCKET_COPY_SUCCESS'))
 }
 
-function handelCopyDownloadingTaskInfo () {
+function handleCopyDownloadingTaskInfo () {
   clipboard.writeText(JSON.stringify(downloadTaskList.value, null, 2))
   ElMessage.success($T('MANAGE_BUCKET_COPY_SUCCESS'))
 }
 
-function handelDeleteUploadedTask () {
+function handleDeleteUploadedTask () {
   ipcRenderer.send('deleteUploadedTask')
   ElMessage.success($T('MANAGE_BUCKET_DELETE_SUCCESS'))
 }
 
-function handelDeleteAllUploadedTask () {
+function handleDeleteAllUploadedTask () {
   ipcRenderer.send('deleteAllUploadedTask')
   ElMessage.success($T('MANAGE_BUCKET_DELETE_SUCCESS'))
 }
 
-function handelDeleteDownloadedTask () {
+function handleDeleteDownloadedTask () {
   ipcRenderer.send('deleteDownloadedTask')
   ElMessage.success($T('MANAGE_BUCKET_DELETE_SUCCESS'))
 }
 
-function handelDeleteAllDownloadedTask () {
+function handleDeleteAllDownloadedTask () {
   ipcRenderer.send('deleteAllDownloadedTask')
   ElMessage.success($T('MANAGE_BUCKET_DELETE_SUCCESS'))
 }
 
-const handelOpenDownloadedFolder = () => ipcRenderer.send('OpenDownloadedFolder', manageStore.config.settings.downloadDir)
+const handleOpenDownloadedFolder = () => ipcRenderer.send('OpenDownloadedFolder', manageStore.config.settings.downloadDir)
 
 function handleShowFileInfo (item: any) {
   isShowFileInfo.value = true
@@ -1902,7 +1902,7 @@ const isShowThumbnail = computed(() => manageStore.config.settings.isShowThumbna
 const isAutoRefresh = computed(() => manageStore.config.settings.isAutoRefresh ?? false)
 const isIgnoreCase = computed(() => manageStore.config.settings.isIgnoreCase ?? false)
 
-async function handelChangeCustomUrl () {
+async function handleChangeCustomUrl () {
   if (currentPicBedName.value === 'github') {
     showLoadingPage.value = true
     if (isLoadingData.value) {
@@ -2006,7 +2006,7 @@ async function initCustomUrlList () {
         currentCustomUrl.value = `https://${configMap.bucketName}.s3.amazonaws.com`
       }
     }
-    handelChangeCustomUrl()
+    handleChangeCustomUrl()
   } else if (currentPicBedName.value === 'webdavplist') {
     const currentConfigs = await getConfig<any>('picBed')
     const currentConfig = currentConfigs[configMap.alias]
@@ -2020,7 +2020,7 @@ async function initCustomUrlList () {
       }
       currentCustomUrl.value = endpoint
     }
-    handelChangeCustomUrl()
+    handleChangeCustomUrl()
   }
 }
 
@@ -2309,7 +2309,7 @@ function sortFile (type: 'name' | 'size' | 'time' | 'ext' | 'check' | 'init') {
   }
 }
 
-function handelCancelCheck () {
+function handleCancelCheck () {
   currentPageFilesInfo.forEach((item: any) => {
     item.checked = false
   })
@@ -2352,7 +2352,7 @@ function handleCheckChange (item: any) {
   }
 }
 
-async function handelFolderBatchDownload (item: any) {
+async function handleFolderBatchDownload (item: any) {
   ElMessageBox.confirm($T('MANAGE_BUCKET_DOWNLOAD_FOLDER_BOX_TITLE'), $T('MANAGE_BUCKET_DOWNLOAD_FOLDER_BOX_TIP'), {
     confirmButtonText: $T('MANAGE_BUCKET_DOWNLOAD_FOLDER_BOX_CONFIRM'),
     cancelButtonText: $T('MANAGE_BUCKET_DOWNLOAD_FOLDER_BOX_CANCEL'),
@@ -2436,7 +2436,7 @@ async function handelFolderBatchDownload (item: any) {
   })
 }
 
-async function handelBatchDownload () {
+async function handleBatchDownload () {
   const defaultDownloadPath = await ipcRenderer.invoke('getDefaultDownloadFolder')
   const param = {
     downloadPath: manageStore.config.settings.downloadDir ?? defaultDownloadPath,
@@ -2459,7 +2459,7 @@ async function handelBatchDownload () {
     }
   })
   ipcRenderer.send('downloadBucketFile', configMap.alias, param)
-  handelCancelCheck()
+  handleCancelCheck()
   isShowDownloadPanel.value = true
 }
 
@@ -2495,7 +2495,7 @@ function handleCheckAllChange () {
   }
 }
 
-function handelCreateFolder () {
+function handleCreateFolder () {
   ElMessageBox.prompt($T('MANAGE_BUCKET_CREATE_FOLDER_BOX_TITLE'), $T('MANAGE_BUCKET_CREATE_FOLDER_BOX_TIP'), {
     confirmButtonText: $T('MANAGE_BUCKET_CREATE_FOLDER_BOX_CONFIRM'),
     cancelButtonText: $T('MANAGE_BUCKET_CREATE_FOLDER_BOX_CANCEL'),
@@ -2524,7 +2524,7 @@ const showUrlDialog = () => {
   dialogVisible.value = true
 }
 
-async function handelUploadFromUrl () {
+async function handleUploadFromUrl () {
   dialogVisible.value = false
   const urlList = [] as string[]
   urlToUpload.value.split('\n').forEach((item: string) => {
@@ -2555,7 +2555,7 @@ async function handelUploadFromUrl () {
   isShowUploadPanel.value = true
 }
 
-function handelBatchRenameFile () {
+function handleBatchRenameFile () {
   batchRenameMatch.value = ''
   isSingleRename.value = false
   isShowBatchRenameDialog.value = true
@@ -2686,7 +2686,7 @@ async function BatchRename () {
   }
 }
 
-function handelBatchCopyInfo () {
+function handleBatchCopyInfo () {
   if (selectedItems.length === 0) {
     ElMessage.warning($T('MANAGE_BUCKET_BATCH_COPY_INFO_ERROR_MSG'))
     return
@@ -2699,7 +2699,7 @@ function handelBatchCopyInfo () {
   ElMessage.success(`${$T('MANAGE_BUCKET_BATCH_COPY_INFO_MSG_A')} ${selectedItems.length} ${$T('MANAGE_BUCKET_BATCH_COPY_INFO_MSG_B')}`)
 }
 
-function handelBatchCopyLink (type: string) {
+function handleBatchCopyLink (type: string) {
   if (selectedItems.length === 0) {
     ElMessage.warning($T('MANAGE_BUCKET_BATCH_COPY_URL_ERROR_MSG'))
     return
@@ -2834,7 +2834,7 @@ async function getBucketFileList () {
   return res
 }
 
-function handelBatchDeleteInfo () {
+function handleBatchDeleteInfo () {
   ElMessageBox.confirm(`${$T('MANAGE_BUCKET_BATCH_DELETE_CONFIRM_TITLE_A')} ${selectedItems.length} ${$T('MANAGE_BUCKET_BATCH_DELETE_CONFIRM_TITLE_B')}`, $T('MANAGE_BUCKET_BATCH_DELETE_CONFIRM_MSG'), {
     confirmButtonText: $T('MANAGE_BUCKET_BATCH_DELETE_CONFIRM_CONFIRM'),
     cancelButtonText: $T('MANAGE_BUCKET_BATCH_DELETE_CONFIRM_CANCEL'),
@@ -3454,7 +3454,7 @@ const columns: Column<any>[] = [
               size="20"
               style="cursor: pointer;"
               color="#409EFF"
-              onClick={() => handelFolderBatchDownload(item)}
+              onClick={() => handleFolderBatchDownload(item)}
             >
               <Download />
             </ElIcon>

src/renderer/manage/pages/manageSetting.vue

@@ -46,7 +46,7 @@
                 style="position:absolute;right: 0;"
                 active-color="#13ce66"
                 inactive-color="#ff4949"
-                @change="handelIsAutoRefreshChange"
+                @change="handleIsAutoRefreshChange"
               />
             </el-form-item>
             <el-form-item>
@@ -104,7 +104,7 @@
                 style="position:absolute;right: 0;"
                 active-color="#13ce66"
                 inactive-color="#ff4949"
-                @change="handelIsShowThumbnailChange"
+                @change="handleIsShowThumbnailChange"
               />
             </el-form-item>
             <el-form-item>
@@ -122,7 +122,7 @@
                 :inactive-text="$T('MANAGE_SETTING_SHOW_FILE_LIST_TYPE_CARD')"
                 active-color="#13ce66"
                 inactive-color="orange"
-                @change="handelIsShowListChange"
+                @change="handleIsShowListChange"
               />
             </el-form-item>
             <el-form-item>
@@ -147,7 +147,7 @@
                 style="position:absolute;right: 0;"
                 active-color="#13ce66"
                 inactive-color="#ff4949"
-                @change="handelIsForceCustomUrlHttpsChange"
+                @change="handleIsForceCustomUrlHttpsChange"
               />
             </el-form-item>
             <el-form-item>
@@ -172,7 +172,7 @@
                 style="position:absolute;right: 0;"
                 active-color="#13ce66"
                 inactive-color="#ff4949"
-                @change="handelIsUploadKeepDirStructureChange"
+                @change="handleIsUploadKeepDirStructureChange"
               />
             </el-form-item>
             <el-form-item>
@@ -199,7 +199,7 @@
                 style="position:absolute;right: 0;"
                 active-color="#13ce66"
                 inactive-color="#ff4949"
-                @change="handelIsDownloadFileKeepDirStructureChange"
+                @change="handleIsDownloadFileKeepDirStructureChange"
               />
             </el-form-item>
             <el-form-item>
@@ -226,7 +226,7 @@
                 style="position:absolute;right: 0;"
                 active-color="#13ce66"
                 inactive-color="#ff4949"
-                @change="handelIsDownloadFolderKeepDirStructureChange"
+                @change="handleIsDownloadFolderKeepDirStructureChange"
               />
             </el-form-item>
             <el-form-item>
@@ -277,7 +277,7 @@
                 style="position:absolute;right: 0;"
                 active-color="#13ce66"
                 inactive-color="#ff4949"
-                @change="handelisIgnoreCaseChange"
+                @change="handleisIgnoreCaseChange"
               />
             </el-form-item>
             <el-form-item>
@@ -302,7 +302,7 @@
                 style="position:absolute;right: 0;"
                 active-color="#13ce66"
                 inactive-color="#ff4949"
-                @change="handelTimestampRenameChange"
+                @change="handleTimestampRenameChange"
               />
             </el-form-item>
             <el-form-item>
@@ -327,7 +327,7 @@
                 style="position:absolute;right: 0;"
                 active-color="#13ce66"
                 inactive-color="#ff4949"
-                @change="handelRandomStringRenameChange"
+                @change="handleRandomStringRenameChange"
               />
             </el-form-item>
             <el-form-item>
@@ -352,7 +352,7 @@
                 style="position:absolute;right: 0;"
                 active-color="#13ce66"
                 inactive-color="#ff4949"
-                @change="handelCustomRenameChange"
+                @change="handleCustomRenameChange"
               />
             </el-form-item>
             <el-link
@@ -407,7 +407,7 @@
               v-model="PreSignedExpire"
               :placeholder="$T('MANAGE_SETTING_PRESIGNED_URL_EXPIRE_TIPS')"
               clearable
-              @blur="handelPreSignedExpireChange"
+              @blur="handlePreSignedExpireChange"
             />
             <el-link
               style="margin-top: 10px;margin-bottom: 10px;color: #409eff;"
@@ -557,7 +557,7 @@ watch(downloadDir, (val) => {
   })
 })
 
-function handelPreSignedExpireChange () {
+function handlePreSignedExpireChange () {
   if (Number.isNaN(Number(PreSignedExpire.value)) || Number(PreSignedExpire.value) <= 0) {
     PreSignedExpire.value = 14400
   }
@@ -593,67 +593,67 @@ async function handleDownloadDirClick () {
   }
 }
 
-function handelIsShowThumbnailChange (val:ICheckBoxValueType) {
+function handleIsShowThumbnailChange (val:ICheckBoxValueType) {
   saveConfig({
     'settings.isShowThumbnail': val
   })
 }
 
-function handelIsShowListChange (val:ICheckBoxValueType) {
+function handleIsShowListChange (val:ICheckBoxValueType) {
   saveConfig({
     'settings.isShowList': val
   })
 }
 
-function handelisIgnoreCaseChange (val:ICheckBoxValueType) {
+function handleisIgnoreCaseChange (val:ICheckBoxValueType) {
   saveConfig({
     'settings.isIgnoreCase': val
   })
 }
 
-function handelIsAutoRefreshChange (val:ICheckBoxValueType) {
+function handleIsAutoRefreshChange (val:ICheckBoxValueType) {
   saveConfig({
     'settings.isAutoRefresh': val
   })
 }
 
-function handelIsUploadKeepDirStructureChange (val:ICheckBoxValueType) {
+function handleIsUploadKeepDirStructureChange (val:ICheckBoxValueType) {
   saveConfig({
     'settings.isUploadKeepDirStructure': val
   })
 }
 
-function handelIsDownloadFileKeepDirStructureChange (val:ICheckBoxValueType) {
+function handleIsDownloadFileKeepDirStructureChange (val:ICheckBoxValueType) {
   saveConfig({
     'settings.isDownloadFileKeepDirStructure': val
   })
 }
 
-function handelIsDownloadFolderKeepDirStructureChange (val:ICheckBoxValueType) {
+function handleIsDownloadFolderKeepDirStructureChange (val:ICheckBoxValueType) {
   saveConfig({
     'settings.isDownloadFolderKeepDirStructure': val
   })
 }
 
-function handelIsForceCustomUrlHttpsChange (val:ICheckBoxValueType) {
+function handleIsForceCustomUrlHttpsChange (val:ICheckBoxValueType) {
   saveConfig({
     'settings.isForceCustomUrlHttps': val
   })
 }
 
-function handelTimestampRenameChange (val:ICheckBoxValueType) {
+function handleTimestampRenameChange (val:ICheckBoxValueType) {
   saveConfig({
     'settings.timestampRename': val
   })
 }
 
-function handelRandomStringRenameChange (val:ICheckBoxValueType) {
+function handleRandomStringRenameChange (val:ICheckBoxValueType) {
   saveConfig({
     'settings.randomStringRename': val
   })
 }
 
-function handelCustomRenameChange (val:ICheckBoxValueType) {
+function handleCustomRenameChange (val:ICheckBoxValueType) {
   saveConfig({
     'settings.customRename': val
   })

src/renderer/pages/Gallery.vue

@@ -279,7 +279,7 @@
               </el-row>
               <el-checkbox
                 v-model="choosedList[item.id ? item.id : '']"
-                @change="(val) => handleChooseImage(val, index)"
+                @change="(val: string | number | boolean) => handleChooseImage(val, index)"
               />
             </el-row>
           </el-col>
@@ -410,7 +410,7 @@
           type="primary"
           plain
           :icon="Edit"
-          @click="handelBatchRename()"
+          @click="handleBatchRename()"
         >
           {{ $T('MANAGE_BUCKET_RENAME_FILE_CONFIRM') }}
         </el-button>
@@ -914,7 +914,7 @@ function sortFile (type: 'name' | 'time' | 'ext' | 'check') {
   }
 }
 
-function handelBatchRename () {
+function handleBatchRename () {
   isShowBatchRenameDialog.value = false
   if (batchRenameMatch.value === '') {
     ElMessage.warning($T('MANAGE_BUCKET_BATCH_RENAME_ERROR_MSG'))

src/renderer/pages/PicGoSetting.vue

@@ -87,6 +87,18 @@
                 @change="handleHideDockChange"
               />
             </el-form-item>
+            <el-form-item
+              :label="$T('SETTINGS_SYNC_CONFIG')"
+            >
+              <el-button
+                type="primary"
+                round
+                size="small"
+                @click="syncVisible = true"
+              >
+                {{ $T('SETTINGS_CLICK_TO_SET') }}
+              </el-button>
+            </el-form-item>
             <el-form-item
               :label="$T('SETTINGS_MIGRATE_FROM_PICGO')"
             >
@@ -94,7 +106,7 @@
                 type="primary"
                 round
                 size="small"
-                @click="handelMigrateFromPicGo"
+                @click="handleMigrateFromPicGo"
               >
                 {{ $T('SETTINGS_CLICK_TO_SET') }}
               </el-button>
@@ -720,7 +732,100 @@
         </el-button>
       </template>
     </el-dialog>
-
+    <el-dialog
+      v-model="syncVisible"
+      class="server-dialog"
+      width="60%"
+      :title="$T('SETTINGS_SYNC_CONFIG_TITLE')"
+      :modal-append-to-body="false"
+      center
+    >
+      <div class="notice-text">
+        {{ $T('SETTINGS_SYNC_CONFIG_NOTE') }}
+      </div>
+      <el-form
+        label-position="right"
+        label-width="120px"
+      >
+        <el-form-item
+          :label="$T('SETTINGS_SYNC_CONFIG_SELECT_TYPE')"
+        >
+          <el-select
+            v-model="sync.type"
+            style="width: 100%;"
+          >
+            <el-option
+              v-for="typeitem of syncType"
+              :key="typeitem.value"
+              :label="typeitem.label"
+              :value="typeitem.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          :label="sync.type === 'github' ? $T('SETTINGS_SYNC_CONFIG_GITHUB_USERNAME') : $T('SETTINGS_SYNC_CONFIG_GITEE_USERNAME')"
+        >
+          <el-input
+            v-model.trim="sync.username"
+            type="input"
+            :placeholder="sync.type === 'github' ? $T('SETTINGS_SYNC_CONFIG_GITHUB_USERNAME_PLACEHOLDER') : $T('SETTINGS_SYNC_CONFIG_GITEE_USERNAME_PLACEHOLDER')"
+          />
+        </el-form-item>
+        <el-form-item
+          :label="sync.type === 'github' ? $T('SETTINGS_SYNC_CONFIG_GITHUB_REPO') : $T('SETTINGS_SYNC_CONFIG_GITEE_REPO')"
+        >
+          <el-input
+            v-model.trim="sync.repo"
+            type="input"
+            :placeholder="sync.type === 'github' ? $T('SETTINGS_SYNC_CONFIG_GITHUB_REPO_PLACEHOLDER') : $T('SETTINGS_SYNC_CONFIG_GITEE_REPO_PLACEHOLDER')"
+          />
+        </el-form-item>
+        <el-form-item
+          :label="sync.type === 'github' ? $T('SETTINGS_SYNC_CONFIG_GITHUB_BRANCH') : $T('SETTINGS_SYNC_CONFIG_GITEE_BRANCH')"
+        >
+          <el-input
+            v-model.trim="sync.branch"
+            type="input"
+            :placeholder="sync.type === 'github' ? $T('SETTINGS_SYNC_CONFIG_GITHUB_BRANCH_PLACEHOLDER') : $T('SETTINGS_SYNC_CONFIG_GITEE_BRANCH_PLACEHOLDER')"
+          />
+        </el-form-item>
+        <el-form-item
+          :label="sync.type === 'github' ? $T('SETTINGS_SYNC_CONFIG_GITHUB_TOKEN') : $T('SETTINGS_SYNC_CONFIG_GITEE_TOKEN')"
+        >
+          <el-input
+            v-model.trim="sync.token"
+            type="input"
+            :placeholder="sync.type === 'github' ? $T('SETTINGS_SYNC_CONFIG_GITHUB_TOKEN_PLACEHOLDER') : $T('SETTINGS_SYNC_CONFIG_GITEE_TOKEN_PLACEHOLDER')"
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="sync.type === 'github'"
+          :label="$T('SETTINGS_SYNC_CONFIG_PROXY')"
+        >
+          <el-input
+            v-model.trim="sync.proxy"
+            type="input"
+            :placeholder="$T('SETTINGS_SYNC_CONFIG_PROXY_PLACEHOLDER')"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button
+          round
+          @click="cancelSyncSetting"
+        >
+          {{ $T('CANCEL') }}
+        </el-button>
+        <el-button
+          type="primary"
+          round
+          :disabled="!allSynFilled"
+          @click="confirmSyncSetting"
+        >
+          {{ $T('CONFIRM') }}
+        </el-button>
+      </template>
+    </el-dialog>
     <el-dialog
       v-model="imageProcessDialogVisible"
       :title="$T('UPLOAD_PAGE_IMAGE_PROCESS_DIALOG_TITLE')"
@@ -938,7 +1043,7 @@
         <el-form-item>
           <el-button
             type="primary"
-            @click="handelSaveConfig"
+            @click="handleSaveConfig"
           >
             {{ $T('UPLOAD_PAGE_IMAGE_PROCESS_CONFIRM') }}
           </el-button>
@@ -954,7 +1059,7 @@
 import { ElForm, ElMessage as $message, ElMessage, ElMessageBox, FormRules } from 'element-plus'
 import { Reading, QuestionFilled } from '@element-plus/icons-vue'
 import pkg from 'root/package.json'
-import { PICGO_OPEN_FILE, OPEN_URL, GET_PICBEDS, HIDE_DOCK } from '#/events/constants'
+import { PICGO_OPEN_FILE, OPEN_URL, GET_PICBEDS, HIDE_DOCK, RELOAD_APP } from '#/events/constants'
 import {
   ipcRenderer
 } from 'electron'
@@ -1017,7 +1122,7 @@ function closeDialog () {
   imageProcessDialogVisible.value = false
 }
 
-function handelSaveConfig () {
+function handleSaveConfig () {
   saveConfig('buildIn.compress', toRaw(compressForm))
   saveConfig('buildIn.watermark', toRaw(waterMarkForm))
   closeDialog()
@@ -1101,6 +1206,7 @@ const logFileVisible = ref(false)
 const customLinkVisible = ref(false)
 const checkUpdateVisible = ref(false)
 const serverVisible = ref(false)
+const syncVisible = ref(false)
 const proxyVisible = ref(false)
 const mainWindowSizeVisible = ref(false)
 
@@ -1140,6 +1246,50 @@ const server = ref({
   enable: true
 })
 
+const sync = ref({
+  type: 'github',
+  username: '',
+  repo: '',
+  branch: '',
+  token: '',
+  proxy: ''
+})
+
+const syncType = [
+  {
+    label: 'GitHub',
+    value: 'github'
+  },
+  {
+    label: 'Gitee',
+    value: 'gitee'
+  }
+]
+
+const allSynFilled = computed(() => {
+  return sync.value.username && sync.value.repo && sync.value.branch && sync.value.token
+})
+
+async function cancelSyncSetting () {
+  syncVisible.value = false
+  sync.value = await getConfig('settings.sync') || {
+    type: 'github',
+    username: '',
+    repo: '',
+    branch: '',
+    token: '',
+    proxy: ''
+  }
+}
+
+function confirmSyncSetting () {
+  saveConfig({
+    'settings.sync': sync.value
+  })
+  syncVisible.value = false
+  sendToMain(RELOAD_APP)
+}
+
 const version = pkg.version
 const latestVersion = ref('')
 const os = ref('')
@@ -1198,6 +1348,14 @@ async function initData () {
       host: '127.0.0.1',
       enable: true
     }
+    sync.value = settings.sync || {
+      type: 'github',
+      username: '',
+      repo: '',
+      branch: '',
+      token: '',
+      proxy: ''
+    }
     form.logFileSizeLimit = enforceNumber(settings.logFileSizeLimit) || 10
   }
 }
@@ -1278,7 +1436,7 @@ function confirmProxy () {
   }
 }
 
-function handelMigrateFromPicGo () {
+function handleMigrateFromPicGo () {
   ElMessageBox.confirm($T('SETTINGS_MIGRATE_FROM_PICGO_CONTENT'), $T('SETTINGS_MIGRATE_FROM_PICGO_TITLE'), {
     confirmButtonText: $T('CONFIRM'),
     cancelButtonText: $T('CANCEL'),

src/renderer/pages/Upload.vue

@@ -366,7 +366,7 @@
         <el-form-item>
           <el-button
             type="primary"
-            @click="handelSaveConfig"
+            @click="handleSaveConfig"
           >
             {{ $T('UPLOAD_PAGE_IMAGE_PROCESS_CONFIRM') }}
           </el-button>
@@ -451,7 +451,7 @@ function closeDialog () {
   imageProcessDialogVisible.value = false
 }
 
-function handelSaveConfig () {
+function handleSaveConfig () {
   saveConfig('buildIn.compress', toRaw(compressForm))
   saveConfig('buildIn.watermark', toRaw(waterMarkForm))
   closeDialog()

src/renderer/pages/picbeds/index.vue

@@ -10,7 +10,7 @@
       >
         <div
           class="view-title"
-          @click="handelNameClick"
+          @click="handleNameClick"
         >
           {{ picBedName }} {{ $T('SETTINGS') }}
           <el-icon
@@ -169,7 +169,7 @@ const handleReset = async () => {
 
 const linkToLogInList = ['github', 'tcyun', 'aliyun', 'smms', 'qiniu', 'imgur', 'upyun', 'githubPlus']
 
-function handelNameClick () {
+function handleNameClick () {
   switch ($route.params.type) {
     case 'github':
     case 'githubPlus':

src/universal/types/i18n.d.ts

@@ -194,6 +194,32 @@ interface ILocales {
   SETTINGS_WATCH_CLIPBOARD: string
   SETTINGS_SHORT_URL: string
   SETTINGS_DELETE_LOCAL_FILE_AFTER_UPLOAD: string
+  SETTINGS_SYNC_CONFIG: string
+  SETTINGS_SYNC_CONFIG_TITLE: string
+  SETTINGS_SYNC_CONFIG_NOTE: string
+  SETTINGS_SYNC_CONFIG_SELECT_TYPE: string
+  SETTINGS_SYNC_CONFIG_SELECT_FILE: string
+  SETTINGS_SYNC_CONFIG_SELECT_CONFIG: string
+  SETTINGS_SYNC_CONFIG_SELECT_GALLERY: string
+  SETTINGS_SYNC_CONFIG_SELECT_BOTH: string
+  SETTINGS_SYNC_CONFIG_GITHUB_USERNAME: string
+  SETTINGS_SYNC_CONFIG_GITEE_USERNAME: string
+  SETTINGS_SYNC_CONFIG_GITHUB_REPO: string
+  SETTINGS_SYNC_CONFIG_GITEE_REPO: string
+  SETTINGS_SYNC_CONFIG_GITHUB_BRANCH: string
+  SETTINGS_SYNC_CONFIG_GITEE_BRANCH: string
+  SETTINGS_SYNC_CONFIG_GITHUB_TOKEN: string
+  SETTINGS_SYNC_CONFIG_GITEE_TOKEN: string
+  SETTINGS_SYNC_CONFIG_PROXY: string
+  SETTINGS_SYNC_CONFIG_GITHUB_USERNAME_PLACEHOLDER: string
+  SETTINGS_SYNC_CONFIG_GITEE_USERNAME_PLACEHOLDER: string
+  SETTINGS_SYNC_CONFIG_GITHUB_REPO_PLACEHOLDER: string
+  SETTINGS_SYNC_CONFIG_GITEE_REPO_PLACEHOLDER: string
+  SETTINGS_SYNC_CONFIG_GITHUB_BRANCH_PLACEHOLDER: string
+  SETTINGS_SYNC_CONFIG_GITEE_BRANCH_PLACEHOLDER: string
+  SETTINGS_SYNC_CONFIG_GITHUB_TOKEN_PLACEHOLDER: string
+  SETTINGS_SYNC_CONFIG_GITEE_TOKEN_PLACEHOLDER: string
+  SETTINGS_SYNC_CONFIG_PROXY_PLACEHOLDER: string
   SHORTCUT_NAME: string
   SHORTCUT_BIND: string
   SHORTCUT_STATUS: string

src/universal/utils/common.ts

@@ -42,9 +42,6 @@ export const handleStreamlinePluginName = (name: string) => {
   }
 }
 
-/**
- * for just simple clone an object
- */
 export const simpleClone = (obj: any) => {
   return JSON.parse(JSON.stringify(obj))
 }