✨ 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,6 +13,17 @@
         <Reading />
       </el-icon>
     </el-row>
+    <el-tabs
+      v-model="activeName"
+      stretch
+      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 class="setting-list">
           <el-col
             :span="22"
@@ -87,218 +98,6 @@
                     @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')"
                 >
@@ -346,6 +145,190 @@
                     {{ $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-tab-pane>
+      <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')"
                 >
@@ -356,6 +339,18 @@
                     @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')"
                 >
@@ -366,6 +361,16 @@
                     @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">
@@ -389,16 +394,6 @@
                     @change="useBuiltinClipboardChange"
                   />
                 </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
                   :label="$T('SETTINGS_WATCH_CLIPBOARD')"
                 >
@@ -432,6 +427,108 @@
             </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