✨ Feature: rewrite the layout of the settings page

public/i18n/en.yml

@@ -265,6 +265,11 @@ SETTINGS_SYNC_DOWNLOAD_FAILED: Download failed
 SETTINGS_SYNC_COMMON_CONFIG: Common configuration
 SETTINGS_SYNC_MANAGE_CONFIG: Manage configuration
 SETTINGS_AUTO_IMPORT: Auto import config in manage page
+SETTINGS_TAB_SYSTEM: System
+SETTINGS_TAB_SYNC_CONFIG: Sync and Configuration
+SETTINGS_TAB_UPLOAD: Upload
+SETTINGS_TAB_ADVANCED: Advanced
+SETTINGS_TAB_UPDATE: Update
 # shortcut-page
 
 BUILTIN_CLIPBOARD_TIPS: Use builtin clipboard function to upload instead of using scripts

public/i18n/zh-CN.yml

@@ -268,6 +268,11 @@ SETTINGS_SYNC_DOWNLOAD_FAILED: 下载失败
 SETTINGS_SYNC_COMMON_CONFIG: 通用配置
 SETTINGS_SYNC_MANAGE_CONFIG: 管理配置
 SETTINGS_AUTO_IMPORT: 管理页面自动导入配置
+SETTINGS_TAB_SYSTEM: 系统设置
+SETTINGS_TAB_SYNC_CONFIG: 同步与配置
+SETTINGS_TAB_UPLOAD: 上传设置
+SETTINGS_TAB_ADVANCED: 高级设置
+SETTINGS_TAB_UPDATE: 更新
 # shortcut-page
 
 SHORTCUT_NAME: 快捷键名称

public/i18n/zh-TW.yml

@@ -266,6 +266,11 @@ SETTINGS_SYNC_DOWNLOAD_FAILED: 下載失敗
 SETTINGS_SYNC_COMMON_CONFIG: 通用配置
 SETTINGS_SYNC_MANAGE_CONFIG: 管理配置
 SETTINGS_AUTO_IMPORT: 管理頁面自動導入配置
+SETTINGS_TAB_SYSTEM: 系統設置
+SETTINGS_TAB_SYNC_CONFIG: 同步與配置
+SETTINGS_TAB_UPLOAD: 上傳設置
+SETTINGS_TAB_ADVANCED: 高級設置
+SETTINGS_TAB_UPDATE: 更新
 # shortcut-page
 
 SHORTCUT_NAME: 快捷鍵名稱

src/renderer/pages/PicGoSetting.vue

@@ -13,425 +13,522 @@
         <Reading />
       </el-icon>
     </el-row>
-    <el-row class="setting-list">
+    <el-tabs
-      <el-col
+      v-model="activeName"
-        :span="22"
+      stretch
-        :offset="1"
+      style="height: calc(100vh - 50px);width: 100%;overflow-x: hidden;top: 50px;position: absolute;"
+      tab-position="left"
+    >
+      <el-tab-pane
+        name="system"
+        :label="$T('SETTINGS_TAB_SYSTEM')"
+        style="height: 100%;overflow-y: scroll;height: calc(100vh - 50px);color: #fff;"
       >
-        <el-row style="width: 100%">
+        <el-row class="setting-list">
-          <el-form
+          <el-col
-            label-position="left"
+            :span="22"
-            label-width="50%"
+            :offset="1"
-            size="small"
           >
-            <el-form-item
+            <el-row style="width: 100%">
-              :label="$T('SETTINGS_CHOOSE_LANGUAGE')"
+              <el-form
-            >
+                label-position="left"
-              <el-select
+                label-width="50%"
-                v-model="currentLanguage"
                 size="small"
-                style="width: 50%"
-                :placeholder="$T('SETTINGS_CHOOSE_LANGUAGE')"
-                @change="handleLanguageChange"
               >
-                <el-option
+                <el-form-item
-                  v-for="item in languageList"
+                  :label="$T('SETTINGS_CHOOSE_LANGUAGE')"
-                  :key="item.value"
+                >
-                  :label="item.label"
+                  <el-select
-                  :value="item.value"
+                    v-model="currentLanguage"
-                />
+                    size="small"
-              </el-select>
+                    style="width: 50%"
-            </el-form-item>
+                    :placeholder="$T('SETTINGS_CHOOSE_LANGUAGE')"
-            <el-form-item
+                    @change="handleLanguageChange"
-              :label="$T('SETTINGS_START_MODE')"
-            >
-              <el-select
-                v-model="currentStartMode"
-                size="small"
-                style="width: 50%"
-                :placeholder="$T('SETTINGS_START_MODE')"
-                @change="handleStartModeChange"
-              >
-                <el-option
-                  key="quiet"
-                  :label="$T('SETTINGS_START_MODE_QUIET')"
-                  :value="'quiet'"
-                />
-                <el-option
-                  v-if="os !== 'darwin'"
-                  key="mini"
-                  :label="$T('SETTINGS_START_MODE_MINI')"
-                  :value="'mini'"
-                />
-                <el-option
-                  v-if="os === 'darwin'"
-                  key="no-tray"
-                  :label="$T('SETTINGS_START_MODE_NO_TRAY')"
-                  :value="'no-tray'"
-                />
-                <el-option
-                  key="main"
-                  :label="$T('SETTINGS_START_MODE_MAIN')"
-                  :value="'main'"
-                />
-              </el-select>
-            </el-form-item>
-            <el-form-item
-              v-if="os === 'darwin'"
-              :label="$T('SETTINGS_ISHIDEDOCK')"
-            >
-              <el-switch
-                v-model="form.isHideDock"
-                :active-text="$T('SETTINGS_OPEN')"
-                :inactive-text="$T('SETTINGS_CLOSE')"
-                @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_UP_DOWN_DESC')"
-            >
-              <el-button
-                type="primary"
-                round
-                size="small"
-                @click=" upDownConfigVisible = true"
-              >
-                {{ $T('SETTINGS_CLICK_TO_SET') }}
-              </el-button>
-            </el-form-item>
-            <el-form-item
-              :label="$T('SETTINGS_MIGRATE_FROM_PICGO')"
-            >
-              <el-button
-                type="primary"
-                round
-                size="small"
-                @click="handleMigrateFromPicGo"
-              >
-                {{ $T('SETTINGS_CLICK_TO_SET') }}
-              </el-button>
-            </el-form-item>
-            <el-form-item
-              :label="$T('SETTINGS_OPEN_CONFIG_FILE')"
-            >
-              <el-button
-                type="primary"
-                round
-                size="small"
-                @click="openFile('data.json')"
-              >
-                {{ $T('SETTINGS_CLICK_TO_OPEN') }}
-              </el-button>
-            </el-form-item>
-            <el-form-item
-              :label="$T('SETTINGS_SET_LOG_FILE')"
-            >
-              <el-button
-                type="primary"
-                round
-                size="small"
-                @click="openLogSetting"
-              >
-                {{ $T('SETTINGS_CLICK_TO_SET') }}
-              </el-button>
-            </el-form-item>
-            <el-form-item
-              :label="$T('SETTINGS_SET_SHORTCUT')"
-            >
-              <el-button
-                type="primary"
-                round
-                size="small"
-                @click="goShortCutPage"
-              >
-                {{ $T('SETTINGS_CLICK_TO_SET') }}
-              </el-button>
-            </el-form-item>
-            <el-form-item
-              :label="$T('SETTINGS_CUSTOM_LINK_FORMAT')"
-            >
-              <el-button
-                type="primary"
-                round
-                size="small"
-                @click="customLinkVisible = true"
-              >
-                {{ $T('SETTINGS_CLICK_TO_SET') }}
-              </el-button>
-            </el-form-item>
-            <el-form-item
-              :label="$T('SETTINGS_COMPRESS_AND_WATERMARK')"
-            >
-              <el-button
-                type="primary"
-                round
-                size="small"
-                @click="imageProcessDialogVisible = true"
-              >
-                {{ $T('SETTINGS_CLICK_TO_SET') }}
-              </el-button>
-            </el-form-item>
-            <el-form-item
-              :label="$T('SETTINGS_SET_PROXY_AND_MIRROR')"
-            >
-              <el-button
-                type="primary"
-                round
-                size="small"
-                @click="proxyVisible = true"
-              >
-                {{ $T('SETTINGS_CLICK_TO_SET') }}
-              </el-button>
-            </el-form-item>
-            <el-form-item
-              :label="$T('SETTINGS_SET_SERVER')"
-            >
-              <el-button
-                type="primary"
-                round
-                size="small"
-                @click="serverVisible = true"
-              >
-                {{ $T('SETTINGS_CLICK_TO_SET') }}
-              </el-button>
-            </el-form-item>
-            <el-form-item
-              :label="$T('SETTINGS_AUTO_IMPORT')"
-            >
-              <el-switch
-                v-model="form.autoImport"
-                :active-text="$T('SETTINGS_OPEN')"
-                :inactive-text="$T('SETTINGS_CLOSE')"
-                @change="autoImportChange"
-              />
-            </el-form-item>
-            <el-form-item
-              :label="$T('SETTINGS_CHECK_UPDATE')"
-            >
-              <el-button
-                type="primary"
-                round
-                size="small"
-                @click="checkUpdate"
-              >
-                {{ $T('SETTINGS_CLICK_TO_CHECK') }}
-              </el-button>
-            </el-form-item>
-            <el-form-item
-              :label="$T('SETTINGS_OPEN_UPDATE_HELPER')"
-            >
-              <el-switch
-                v-model="form.updateHelper"
-                :active-text="$T('SETTINGS_OPEN')"
-                :inactive-text="$T('SETTINGS_CLOSE')"
-                @change="updateHelperChange"
-              />
-            </el-form-item>
-            <el-form-item
-              :label="$T('SETTINGS_LAUNCH_ON_BOOT')"
-            >
-              <el-switch
-                v-model="form.autoStart"
-                :active-text="$T('SETTINGS_OPEN')"
-                :inactive-text="$T('SETTINGS_CLOSE')"
-                @change="handleAutoStartChange"
-              />
-            </el-form-item>
-            <el-form-item
-              :label="$T('SETTINGS_SYNC_DELETE_CLOUD')"
-            >
-              <el-switch
-                v-model="form.deleteCloudFile"
-                :active-text="$T('SETTINGS_OPEN')"
-                :inactive-text="$T('SETTINGS_CLOSE')"
-                @change="handleDeleteCloudFile"
-              />
-            </el-form-item>
-            <el-form-item
-              :label="$T('SETTINGS_DELETE_LOCAL_FILE_AFTER_UPLOAD')"
-            >
-              <el-switch
-                v-model="form.deleteLocalFile"
-                :active-text="$T('SETTINGS_OPEN')"
-                :inactive-text="$T('SETTINGS_CLOSE')"
-                @change="handleDeleteLocalFile"
-              />
-            </el-form-item>
-            <el-form-item
-              :label="$T('SETTINGS_RENAME_BEFORE_UPLOAD')"
-            >
-              <el-switch
-                v-model="form.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"
-                :active-text="$T('SETTINGS_OPEN')"
-                :inactive-text="$T('SETTINGS_CLOSE')"
-                @change="handleAutoRename"
-              />
-            </el-form-item>
-            <el-form-item
-              :label="$T('SETTINGS_OPEN_UPLOAD_TIPS')"
-            >
-              <el-switch
-                v-model="form.uploadNotification"
-                :active-text="$T('SETTINGS_OPEN')"
-                :inactive-text="$T('SETTINGS_CLOSE')"
-                @change="handleUploadNotification"
-              />
-            </el-form-item>
-            <el-form-item
-              :label="$T('SETTINGS_MAIN_WINDOW_SIZE')"
-            >
-              <el-button
-                type="primary"
-                round
-                size="small"
-                @click="mainWindowSizeVisible = true"
-              >
-                {{ $T('SETTINGS_CLICK_TO_SET') }}
-              </el-button>
-            </el-form-item>
-            <el-form-item
-              v-if="os !== 'darwin'"
-              :label="$T('SETTINGS_MINI_WINDOW_ON_TOP')"
-            >
-              <el-switch
-                v-model="form.miniWindowOntop"
-                :active-text="$T('SETTINGS_OPEN')"
-                :inactive-text="$T('SETTINGS_CLOSE')"
-                @change="handleMiniWindowOntop"
-              />
-            </el-form-item>
-            <el-form-item
-              v-if="os !== 'darwin'"
-              :label="$T('SETTINGS_CUSTOM_MINI_ICON')"
-            >
-              <el-switch
-                v-model="form.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"
-              :label="$T('SETTINGS_CUSTOM_MINI_ICON_PATH')"
-            >
-              <el-button
-                type="primary"
-                round
-                size="small"
-                @click="handleMiniIconPath"
-              >
-                {{ $T('SETTINGS_CLICK_TO_SET') }}
-              </el-button>
-            </el-form-item>
-            <el-form-item
-              :label="$T('SETTINGS_AUTO_COPY_URL_AFTER_UPLOAD')"
-            >
-              <el-switch
-                v-model="form.autoCopyUrl"
-                :active-text="$T('SETTINGS_OPEN')"
-                :inactive-text="$T('SETTINGS_CLOSE')"
-                @change="handleAutoCopyUrl"
-              />
-            </el-form-item>
-            <el-form-item
-              :label="$T('SETTINGS_SHORT_URL')"
-            >
-              <el-switch
-                v-model="form.useShortUrl"
-                :active-text="$T('SETTINGS_OPEN')"
-                :inactive-text="$T('SETTINGS_CLOSE')"
-                @change="handleUseShortUrl"
-              />
-            </el-form-item>
-            <el-form-item>
-              <template #label>
-                <el-row align="middle">
-                  {{ $T('SETTINGS_USE_BUILTIN_CLIPBOARD_UPLOAD') }}
-                  <el-tooltip
-                    class="item"
-                    effect="dark"
-                    :content="$T('BUILTIN_CLIPBOARD_TIPS')"
-                    placement="right"
                   >
-                    <el-icon style="margin-left: 4px">
+                    <el-option
-                      <QuestionFilled />
+                      v-for="item in languageList"
-                    </el-icon>
+                      :key="item.value"
-                  </el-tooltip>
+                      :label="item.label"
-                </el-row>
+                      :value="item.value"
-              </template>
+                    />
-              <el-switch
+                  </el-select>
-                v-model="form.useBuiltinClipboard"
+                </el-form-item>
-                :active-text="$T('SETTINGS_OPEN')"
+                <el-form-item
-                :inactive-text="$T('SETTINGS_CLOSE')"
+                  :label="$T('SETTINGS_START_MODE')"
-                @change="useBuiltinClipboardChange"
+                >
-              />
+                  <el-select
-            </el-form-item>
+                    v-model="currentStartMode"
-            <el-form-item
+                    size="small"
-              :label="$T('SETTINGS_ENCODE_OUTPUT_URL')"
+                    style="width: 50%"
-            >
+                    :placeholder="$T('SETTINGS_START_MODE')"
-              <el-switch
+                    @change="handleStartModeChange"
-                v-model="form.encodeOutputURL"
+                  >
-                :active-text="$T('SETTINGS_OPEN')"
+                    <el-option
-                :inactive-text="$T('SETTINGS_CLOSE')"
+                      key="quiet"
-                @change="handleEncodeOutputURL"
+                      :label="$T('SETTINGS_START_MODE_QUIET')"
-              />
+                      :value="'quiet'"
-            </el-form-item>
+                    />
-            <el-form-item
+                    <el-option
-              :label="$T('SETTINGS_WATCH_CLIPBOARD')"
+                      v-if="os !== 'darwin'"
-            >
+                      key="mini"
-              <el-switch
+                      :label="$T('SETTINGS_START_MODE_MINI')"
-                v-model="form.isAutoListenClipboard"
+                      :value="'mini'"
-                :active-text="$T('SETTINGS_OPEN')"
+                    />
-                :inactive-text="$T('SETTINGS_CLOSE')"
+                    <el-option
-                @change="handleIsAutoListenClipboard"
+                      v-if="os === 'darwin'"
-              />
+                      key="no-tray"
-            </el-form-item>
+                      :label="$T('SETTINGS_START_MODE_NO_TRAY')"
-            <el-form-item
+                      :value="'no-tray'"
-              :style="{ marginRight: '-64px' }"
+                    />
-              :label="$T('CHOOSE_SHOWED_PICBED')"
+                    <el-option
-            >
+                      key="main"
-              <el-checkbox-group
+                      :label="$T('SETTINGS_START_MODE_MAIN')"
-                v-model="form.showPicBedList"
+                      :value="'main'"
-                @change="handleShowPicBedListChange"
+                    />
-              >
+                  </el-select>
-                <el-checkbox
+                </el-form-item>
-                  v-for="item in picBed"
+                <el-form-item
-                  :key="item.name"
+                  v-if="os === 'darwin'"
-                  :label="item.name"
+                  :label="$T('SETTINGS_ISHIDEDOCK')"
-                />
+                >
-              </el-checkbox-group>
+                  <el-switch
-            </el-form-item>
+                    v-model="form.isHideDock"
-            <el-divider
+                    :active-text="$T('SETTINGS_OPEN')"
-              border-style="none"
+                    :inactive-text="$T('SETTINGS_CLOSE')"
-            />
+                    @change="handleHideDockChange"
-            <el-form-item />
+                  />
-          </el-form>
+                </el-form-item>
+                <el-form-item
+                  :label="$T('SETTINGS_MAIN_WINDOW_SIZE')"
+                >
+                  <el-button
+                    type="primary"
+                    round
+                    size="small"
+                    @click="mainWindowSizeVisible = true"
+                  >
+                    {{ $T('SETTINGS_CLICK_TO_SET') }}
+                  </el-button>
+                </el-form-item>
+                <el-form-item
+                  v-if="os !== 'darwin'"
+                  :label="$T('SETTINGS_MINI_WINDOW_ON_TOP')"
+                >
+                  <el-switch
+                    v-model="form.miniWindowOntop"
+                    :active-text="$T('SETTINGS_OPEN')"
+                    :inactive-text="$T('SETTINGS_CLOSE')"
+                    @change="handleMiniWindowOntop"
+                  />
+                </el-form-item>
+                <el-form-item
+                  v-if="os !== 'darwin'"
+                  :label="$T('SETTINGS_CUSTOM_MINI_ICON')"
+                >
+                  <el-switch
+                    v-model="form.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"
+                  :label="$T('SETTINGS_CUSTOM_MINI_ICON_PATH')"
+                >
+                  <el-button
+                    type="primary"
+                    round
+                    size="small"
+                    @click="handleMiniIconPath"
+                  >
+                    {{ $T('SETTINGS_CLICK_TO_SET') }}
+                  </el-button>
+                </el-form-item>
+                <el-form-item
+                  :label="$T('SETTINGS_LAUNCH_ON_BOOT')"
+                >
+                  <el-switch
+                    v-model="form.autoStart"
+                    :active-text="$T('SETTINGS_OPEN')"
+                    :inactive-text="$T('SETTINGS_CLOSE')"
+                    @change="handleAutoStartChange"
+                  />
+                </el-form-item>
+                <el-form-item
+                  :label="$T('SETTINGS_SET_SHORTCUT')"
+                >
+                  <el-button
+                    type="primary"
+                    round
+                    size="small"
+                    @click="goShortCutPage"
+                  >
+                    {{ $T('SETTINGS_CLICK_TO_SET') }}
+                  </el-button>
+                </el-form-item>
+              </el-form>
+            </el-row>
+          </el-col>
         </el-row>
-      </el-col>
+      </el-tab-pane>
-    </el-row>
+      <el-tab-pane
+        name="syncAndConfigure"
+        :label="$T('SETTINGS_TAB_SYNC_CONFIG')"
+        style="height: 100%;overflow-y: scroll;height: calc(100vh - 50px);color: #fff;"
+      >
+        <el-row class="setting-list">
+          <el-col
+            :span="22"
+            :offset="1"
+          >
+            <el-row style="width: 100%">
+              <el-form
+                label-position="left"
+                label-width="50%"
+                size="small"
+              >
+                <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_UP_DOWN_DESC')"
+                >
+                  <el-button
+                    type="primary"
+                    round
+                    size="small"
+                    @click=" upDownConfigVisible = true"
+                  >
+                    {{ $T('SETTINGS_CLICK_TO_SET') }}
+                  </el-button>
+                </el-form-item>
+                <el-form-item
+                  :label="$T('SETTINGS_MIGRATE_FROM_PICGO')"
+                >
+                  <el-button
+                    type="primary"
+                    round
+                    size="small"
+                    @click="handleMigrateFromPicGo"
+                  >
+                    {{ $T('SETTINGS_CLICK_TO_SET') }}
+                  </el-button>
+                </el-form-item>
+                <el-form-item
+                  :label="$T('SETTINGS_OPEN_CONFIG_FILE')"
+                >
+                  <el-button
+                    type="primary"
+                    round
+                    size="small"
+                    @click="openFile('data.json')"
+                  >
+                    {{ $T('SETTINGS_CLICK_TO_OPEN') }}
+                  </el-button>
+                </el-form-item>
+              </el-form>
+            </el-row>
+          </el-col>
+        </el-row>
+      </el-tab-pane>
+      <el-tab-pane
+        name="upload"
+        :label="$T('SETTINGS_TAB_UPLOAD')"
+        style="height: 100%;overflow-y: scroll;height: calc(100vh - 50px);color: #fff;"
+      >
+        <el-row class="setting-list">
+          <el-col
+            :span="22"
+            :offset="1"
+          >
+            <el-row style="width: 100%">
+              <el-form
+                label-position="left"
+                label-width="50%"
+                size="small"
+              >
+                <el-form-item
+                  :label="$T('SETTINGS_AUTO_IMPORT')"
+                >
+                  <el-switch
+                    v-model="form.autoImport"
+                    :active-text="$T('SETTINGS_OPEN')"
+                    :inactive-text="$T('SETTINGS_CLOSE')"
+                    @change="autoImportChange"
+                  />
+                </el-form-item>
+                <el-form-item
+                  :label="$T('SETTINGS_SYNC_DELETE_CLOUD')"
+                >
+                  <el-switch
+                    v-model="form.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"
+                    :active-text="$T('SETTINGS_OPEN')"
+                    :inactive-text="$T('SETTINGS_CLOSE')"
+                    @change="handleUploadNotification"
+                  />
+                </el-form-item>
+                <el-form-item
+                  :label="$T('SETTINGS_COMPRESS_AND_WATERMARK')"
+                >
+                  <el-button
+                    type="primary"
+                    round
+                    size="small"
+                    @click="imageProcessDialogVisible = true"
+                  >
+                    {{ $T('SETTINGS_CLICK_TO_SET') }}
+                  </el-button>
+                </el-form-item>
+                <el-form-item
+                  :label="$T('SETTINGS_RENAME_BEFORE_UPLOAD')"
+                >
+                  <el-switch
+                    v-model="form.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"
+                    :active-text="$T('SETTINGS_OPEN')"
+                    :inactive-text="$T('SETTINGS_CLOSE')"
+                    @change="handleAutoRename"
+                  />
+                </el-form-item>
+                <el-form-item
+                  :label="$T('SETTINGS_DELETE_LOCAL_FILE_AFTER_UPLOAD')"
+                >
+                  <el-switch
+                    v-model="form.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"
+                    :active-text="$T('SETTINGS_OPEN')"
+                    :inactive-text="$T('SETTINGS_CLOSE')"
+                    @change="handleAutoCopyUrl"
+                  />
+                </el-form-item>
+                <el-form-item
+                  :label="$T('SETTINGS_CUSTOM_LINK_FORMAT')"
+                >
+                  <el-button
+                    type="primary"
+                    round
+                    size="small"
+                    @click="customLinkVisible = true"
+                  >
+                    {{ $T('SETTINGS_CLICK_TO_SET') }}
+                  </el-button>
+                </el-form-item>
+                <el-form-item
+                  :label="$T('SETTINGS_SHORT_URL')"
+                >
+                  <el-switch
+                    v-model="form.useShortUrl"
+                    :active-text="$T('SETTINGS_OPEN')"
+                    :inactive-text="$T('SETTINGS_CLOSE')"
+                    @change="handleUseShortUrl"
+                  />
+                </el-form-item>
+                <el-form-item
+                  :label="$T('SETTINGS_ENCODE_OUTPUT_URL')"
+                >
+                  <el-switch
+                    v-model="form.encodeOutputURL"
+                    :active-text="$T('SETTINGS_OPEN')"
+                    :inactive-text="$T('SETTINGS_CLOSE')"
+                    @change="handleEncodeOutputURL"
+                  />
+                </el-form-item>
+                <el-form-item>
+                  <template #label>
+                    <el-row align="middle">
+                      {{ $T('SETTINGS_USE_BUILTIN_CLIPBOARD_UPLOAD') }}
+                      <el-tooltip
+                        class="item"
+                        effect="dark"
+                        :content="$T('BUILTIN_CLIPBOARD_TIPS')"
+                        placement="right"
+                      >
+                        <el-icon style="margin-left: 4px">
+                          <QuestionFilled />
+                        </el-icon>
+                      </el-tooltip>
+                    </el-row>
+                  </template>
+                  <el-switch
+                    v-model="form.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"
+                    :active-text="$T('SETTINGS_OPEN')"
+                    :inactive-text="$T('SETTINGS_CLOSE')"
+                    @change="handleIsAutoListenClipboard"
+                  />
+                </el-form-item>
+                <el-form-item
+                  :style="{ marginRight: '-64px' }"
+                  :label="$T('CHOOSE_SHOWED_PICBED')"
+                >
+                  <el-checkbox-group
+                    v-model="form.showPicBedList"
+                    @change="handleShowPicBedListChange"
+                  >
+                    <el-checkbox
+                      v-for="item in picBed"
+                      :key="item.name"
+                      :label="item.name"
+                    />
+                  </el-checkbox-group>
+                </el-form-item>
+                <el-divider
+                  border-style="none"
+                />
+                <el-form-item />
+              </el-form>
+            </el-row>
+          </el-col>
+        </el-row>
+      </el-tab-pane>
+      <el-tab-pane
+        name="advanced"
+        :label="$T('SETTINGS_TAB_ADVANCED')"
+        style="height: 100%;overflow-y: scroll;height: calc(100vh - 50px);color: #fff;"
+      >
+        <el-row class="setting-list">
+          <el-col
+            :span="22"
+            :offset="1"
+          >
+            <el-row style="width: 100%">
+              <el-form
+                label-position="left"
+                label-width="50%"
+                size="small"
+              >
+                <el-form-item
+                  :label="$T('SETTINGS_SET_LOG_FILE')"
+                >
+                  <el-button
+                    type="primary"
+                    round
+                    size="small"
+                    @click="openLogSetting"
+                  >
+                    {{ $T('SETTINGS_CLICK_TO_SET') }}
+                  </el-button>
+                </el-form-item>
+                <el-form-item
+                  :label="$T('SETTINGS_SET_PROXY_AND_MIRROR')"
+                >
+                  <el-button
+                    type="primary"
+                    round
+                    size="small"
+                    @click="proxyVisible = true"
+                  >
+                    {{ $T('SETTINGS_CLICK_TO_SET') }}
+                  </el-button>
+                </el-form-item>
+                <el-form-item
+                  :label="$T('SETTINGS_SET_SERVER')"
+                >
+                  <el-button
+                    type="primary"
+                    round
+                    size="small"
+                    @click="serverVisible = true"
+                  >
+                    {{ $T('SETTINGS_CLICK_TO_SET') }}
+                  </el-button>
+                </el-form-item>
+              </el-form>
+            </el-row>
+          </el-col>
+        </el-row>
+      </el-tab-pane>
+      <el-tab-pane
+        name="upadte"
+        :label="$T('SETTINGS_TAB_UPDATE')"
+        style="height: 100%;overflow-y: scroll;height: calc(100vh - 50px);"
+      >
+        <el-row class="setting-list">
+          <el-col
+            :span="22"
+            :offset="1"
+          >
+            <el-row style="width: 100%">
+              <el-form
+                label-position="left"
+                label-width="50%"
+                size="small"
+              >
+                <el-form-item
+                  :label="$T('SETTINGS_CHECK_UPDATE')"
+                >
+                  <el-button
+                    type="primary"
+                    round
+                    size="small"
+                    @click="checkUpdate"
+                  >
+                    {{ $T('SETTINGS_CLICK_TO_CHECK') }}
+                  </el-button>
+                </el-form-item>
+                <el-form-item
+                  :label="$T('SETTINGS_OPEN_UPDATE_HELPER')"
+                >
+                  <el-switch
+                    v-model="form.updateHelper"
+                    :active-text="$T('SETTINGS_OPEN')"
+                    :inactive-text="$T('SETTINGS_CLOSE')"
+                    @change="updateHelperChange"
+                  />
+                </el-form-item>
+              </el-form>
+            </el-row>
+          </el-col>
+        </el-row>
+      </el-tab-pane>
+    </el-tabs>
     <el-dialog
       v-model="customLinkVisible"
       :title="$T('SETTINGS_CUSTOM_LINK_FORMAT')"
@@ -1171,6 +1268,7 @@ import { IConfig, IBuildInCompressOptions, IBuildInWaterMarkOptions } from 'picl
 import { invokeToMain } from '@/manage/utils/dataSender'
 
 const imageProcessDialogVisible = ref(false)
+const activeName = ref<'system' | 'syncAndConfigure' | 'upload' | 'advanced' | 'upadte'>('system')
 
 const waterMarkPositionMap = new Map([
   ['north', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_TOP')],
@@ -1901,6 +1999,8 @@ export default {
     transition color .2s ease-in-out
     &:hover
       color #49B1F5
+.el-tabs__item
+  color:white
 #picgo-setting
   height 100%
   position absolute

src/universal/types/i18n.d.ts

@@ -261,6 +261,11 @@ interface ILocales {
   SETTINGS_SYNC_COMMON_CONFIG: string
   SETTINGS_SYNC_MANAGE_CONFIG: string
   SETTINGS_AUTO_IMPORT: string
+  SETTINGS_TAB_SYSTEM: string
+  SETTINGS_TAB_SYNC_CONFIG: string
+  SETTINGS_TAB_UPLOAD: string
+  SETTINGS_TAB_ADVANCED: string
+  SETTINGS_TAB_UPDATE: string
   SHORTCUT_NAME: string
   SHORTCUT_BIND: string
   SHORTCUT_STATUS: string