✨ Feature: optimize memory use and loading and searching speed of manage page for 30 fold

public/i18n/en.yml

@@ -676,7 +676,7 @@ MANAGE_CONSTANT_SFTP_BUCKET_PLACEHOLDER: 'e.g. bucket1'
 MANAGE_CONSTANT_SFTP_BUCKET_TOOLTIP: This cannot be modified, only for software compatibility consideration
 
 MANAGE_LOGIN_PAGE_PANE_NAME: Saved Config
-MANAGE_LOGIN_PAGE_PANE_DESC: Click on the icon or alias to view details, Enter to view the file page, Delete to remove the configuration
+MANAGE_LOGIN_PAGE_PANE_DESC: Click on the icon or alias to view details
 MANAGE_LOGIN_PAGE_PANE_LOADING: Importing...
 MANAGE_LOGIN_PAGE_PANE_KEY_NAME: Configuration
 MANAGE_LOGIN_PAGE_PANE_KEY_VALUE: Value
@@ -725,6 +725,7 @@ MANAGE_BUCKET_SORT_SIZE: Size
 MANAGE_BUCKET_SORT_TYPE: Type
 MANAGE_BUCKET_SORT_TIME: Time
 MANAGE_BUCKET_SORT_SELECTED: Selected status
+MANAGE_BUCKET_INIT: Init
 MANAGE_BUCKET_URL_UPLOAD_DIALOG_TITLE: Please enter URL(s), support multiple URLs separated by line breaks
 MANAGE_BUCKET_URL_UPLOAD_DIALOG_CONFIRM: Confirm
 MANAGE_BUCKET_URL_UPLOAD_DIALOG_CANCEL: Cancel

public/i18n/zh-CN.yml

@@ -680,7 +680,7 @@ MANAGE_CONSTANT_SFTP_BUCKET_TOOLTIP: 此处不可修改，仅为软件兼容性
 
 
 MANAGE_LOGIN_PAGE_PANE_NAME: 已保存配置
-MANAGE_LOGIN_PAGE_PANE_DESC: 点击图标和别名可查看详情，点击进入可查看文件页面，点击删除可删除配置
+MANAGE_LOGIN_PAGE_PANE_DESC: 点击图标和别名可查看详情
 MANAGE_LOGIN_PAGE_PANE_LOADING: 导入配置...
 MANAGE_LOGIN_PAGE_PANE_KEY_NAME: 配置项
 MANAGE_LOGIN_PAGE_PANE_KEY_VALUE: 值
@@ -729,6 +729,7 @@ MANAGE_BUCKET_SORT_SIZE: 大小
 MANAGE_BUCKET_SORT_TYPE: 类型
 MANAGE_BUCKET_SORT_TIME: 时间
 MANAGE_BUCKET_SORT_SELECTED: 选中状态
+MANAGE_BUCKET_INIT: 初始化
 MANAGE_BUCKET_URL_UPLOAD_DIALOG_TITLE: 请输入URL，支持多个URL，以换行分隔
 MANAGE_BUCKET_URL_UPLOAD_DIALOG_CONFIRM: 确定
 MANAGE_BUCKET_URL_UPLOAD_DIALOG_CANCEL: 取消

public/i18n/zh-TW.yml

@@ -676,7 +676,7 @@ MANAGE_CONSTANT_SFTP_BUCKET_PLACEHOLDER: '例如：bucket1'
 MANAGE_CONSTANT_SFTP_BUCKET_TOOLTIP: 此處不可修改，僅為軟體相容性考量
 
 MANAGE_LOGIN_PAGE_PANE_NAME: 已保存配置
-MANAGE_LOGIN_PAGE_PANE_DESC: 點擊圖標和別名可查看詳情，點擊進入可查看檔案頁面，點擊刪除可刪除配置
+MANAGE_LOGIN_PAGE_PANE_DESC: 點擊圖標和別名可查看詳情
 MANAGE_LOGIN_PAGE_PANE_LOADING: 導入配置...
 MANAGE_LOGIN_PAGE_PANE_KEY_NAME: 配置項
 MANAGE_LOGIN_PAGE_PANE_KEY_VALUE: 值
@@ -725,6 +725,7 @@ MANAGE_BUCKET_SORT_SIZE: 大小
 MANAGE_BUCKET_SORT_TYPE: 類型
 MANAGE_BUCKET_SORT_TIME: 時間
 MANAGE_BUCKET_SORT_SELECTED: 選取狀態
+MANAGE_BUCKET_INIT: 初始化
 MANAGE_BUCKET_URL_UPLOAD_DIALOG_TITLE: 請輸入 URL，支援多個 URL，以換行分隔
 MANAGE_BUCKET_URL_UPLOAD_DIALOG_CONFIRM: 確定
 MANAGE_BUCKET_URL_UPLOAD_DIALOG_CANCEL: 取消

src/main/lifeCycle/index.ts

@@ -10,6 +10,7 @@ import {
 import {
   createProtocol
 } from 'vue-cli-plugin-electron-builder/lib'
+import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
 import beforeOpen from '~/main/utils/beforeOpen'
 import ipcList from '~/main/events/ipcList'
 import busEventList from '~/main/events/busEventList'
@@ -137,6 +138,13 @@ class LifeCycle {
     const readyFunction = async () => {
       console.log('on ready')
       createProtocol('picgo')
+      if (isDevelopment && !process.env.IS_TEST) {
+        try {
+          await installExtension(VUEJS_DEVTOOLS)
+        } catch (e: any) {
+          console.error('Vue Devtools failed to install:', e.toString())
+        }
+      }
       windowManager.create(IWindowList.TRAY_WINDOW)
       windowManager.create(IWindowList.SETTING_WINDOW)
       const isAutoListenClipboard = db.get('settings.isAutoListenClipboard') || false

src/renderer/components/ConfigForm.vue

@@ -36,6 +36,8 @@
                 class="item"
                 effect="dark"
                 placement="right"
+                :persistent="false"
+                teleported
               >
                 <template #content>
                   <span
@@ -60,6 +62,8 @@
           v-else-if="item.type === 'list' && item.choices"
           v-model="ruleForm[item.name]"
           :placeholder="item.message || item.name"
+          :persistent="false"
+          teleported
         >
           <el-option
             v-for="choice in item.choices"
@@ -74,6 +78,8 @@
           :placeholder="item.message || item.name"
           multiple
           collapse-tags
+          :persistent="false"
+          teleported
         >
           <el-option
             v-for="choice in item.choices"

src/renderer/components/ConfigFormForPlugin.vue

@@ -39,6 +39,8 @@
           v-else-if="item.type === 'list' && item.choices"
           v-model="ruleForm[item.name]"
           :placeholder="item.message || item.name"
+          :persistent="false"
+          teleported
         >
           <el-option
             v-for="choice in item.choices"
@@ -53,6 +55,8 @@
           :placeholder="item.message || item.name"
           multiple
           collapse-tags
+          :persistent="false"
+          teleported
         >
           <el-option
             v-for="choice in item.choices"

src/renderer/components/settings/CheckboxFormItem.vue

@@ -9,6 +9,8 @@
             effect="dark"
             :content="props.tooltips"
             placement="right"
+            :persistent="false"
+            teleported
           >
             <el-icon style="margin-left: 4px">
               <QuestionFilled />

src/renderer/layouts/Main.vue

@@ -213,6 +213,8 @@
             v-model="choosedPicBedForQRCode"
             multiple
             collapse-tags
+            :persistent="false"
+            teleported
           >
             <el-option
               v-for="item in picBed"

src/renderer/manage/pages/logIn.vue

@@ -6,15 +6,16 @@
       stretch
       style="height: calc(100vh - 50px);width: 100%;overflow-x: hidden;"
       tab-position="left"
+      lazy
       @tab-change="getExistingConfig(activeName)"
     >
       <el-tab-pane
         name="login"
         :label="$T('MANAGE_LOGIN_PAGE_PANE_NAME')"
         style="width: 100%;overflow-y: scroll;height: calc(100vh - 50px);"
+        lazy
       >
         <el-alert
-          v-loading="isLoading"
           :title="$T('MANAGE_LOGIN_PAGE_PANE_DESC')"
           type="success"
           show-icon
@@ -42,6 +43,8 @@
                 placement="top"
                 :width="300"
                 trigger="click"
+                :persistent="false"
+                teleported
               >
                 <el-table
                   :data="formObjToTableData(item.config)"
@@ -75,6 +78,8 @@
                       :content="item.alias"
                       placement="top"
                       :disabled="isNeedToShorten(item.alias)"
+                      :persistent="false"
+                      teleported
                     >
                       {{ isNeedToShorten(item.alias) ? safeSliceF(item.alias, 17) + '...' : item.alias }}
                     </el-tooltip>
@@ -152,6 +157,8 @@
                 effect="dark"
                 :content="supportedPicBedList[item.icon].configOptions[option].tooltip"
                 placement="right"
+                :persistent="false"
+                teleported
               >
                 <el-icon
                   color="#409EFF"
@@ -169,8 +176,7 @@
             <el-switch
               v-else-if="supportedPicBedList[item.icon].configOptions[option].type === 'boolean'"
               v-model="configResult[item.icon + '.' + option]"
-              active-color="#13ce66"
+              style="--el-switch-on-color: #13ce66;--el-switch-off-color: #ff4949;"
-              inactive-color="#ff4949"
             />
             <el-input
               v-else-if="supportedPicBedList[item.icon].configOptions[option].type === 'number'"
@@ -181,6 +187,8 @@
               v-else-if="supportedPicBedList[item.icon].configOptions[option].type === 'select'"
               v-model="configResult[item.icon + '.' + option]"
               :placeholder="$T('MANAGE_LOGIN_PAGE_PANE_SELECT_PLACEHOLDER')"
+              :persistent="false"
+              teleported
             >
               <el-option
                 v-for="i in Object.entries(supportedPicBedList[item.icon].configOptions[option].selectOptions)"
@@ -198,6 +206,7 @@
             style="margin-left: 10vw"
             placement="top"
             :disabled="currentAliasList.length === 0"
+            teleported
           >
             {{ $T('MANAGE_LOGIN_PAGE_PANE_IMPORT') }}
             <template #dropdown>
@@ -298,7 +307,6 @@ import { T as $T } from '@/i18n'
 const manageStore = useManageStore()
 const router = useRouter()
 
-const isLoading = ref(false)
 const activeName = ref('login')
 
 const configResult:IStringKeyMap = reactive({})
@@ -820,9 +828,8 @@ async function transUpToManage (config: IUploaderConfigListItem, picBedName: str
   importedNewConfig[alias] = resultMap
 }
 
-onMounted(async () => {
+onMounted(() => {
-  await getCurrentConfigList()
+  getCurrentConfigList()
-  getAllConfigAliasArray()
 })
 
 </script>

src/renderer/manage/pages/manageMain.vue

@@ -27,6 +27,8 @@
             effect="dark"
             :content="$T('MANAGE_MAIN_PAGE_NEW_BUCKET')"
             placement="right"
+            :persistent="false"
+            teleported
             popper-class="layout__menu__button__divider__tooltip"
           >
             <el-icon
@@ -143,6 +145,7 @@
     <el-dialog
       v-model="picBedSwitchDialogVisible"
       top="30vh"
+      append-to-body
     >
       <div
         class="choice-cos"
@@ -195,6 +198,7 @@
     <el-drawer
       v-model="nweBucketDrawerVisible"
       class="layout__addNewBucket"
+      append-to-body
     >
       <el-form
         label-position="top"
@@ -240,6 +244,8 @@
             v-if="newBucketConfig[currentPicBedName].configOptions[option].component === 'select'"
             v-model="newBucketConfigResult[currentPicBedName+'.'+option]"
             size="large"
+            :persistent="false"
+            teleported
           >
             <el-option
               v-for="item in Object.keys(newBucketConfig[currentPicBedName].configOptions[option].options)"

src/renderer/manage/pages/manageSetting.vue

@@ -34,6 +34,8 @@
                     effect="dark"
                     :content="$T('MANAGE_SETTING_AUTO_FRESH_TIPS')"
                     placement="right"
+                    :persistent="false"
+                    teleported
                   >
                     <el-icon>
                       <InfoFilled />
@@ -43,9 +45,7 @@
               </template>
               <el-switch
                 v-model="form.isAutoRefresh"
-                style="position:absolute;right: 0;"
+                style="position:absolute;right: 0;--el-switch-on-color: #13ce66;--el-switch-off-color: #ff4949;"
-                active-color="#13ce66"
-                inactive-color="#ff4949"
                 @change="handleIsAutoRefreshChange"
               />
             </el-form-item>
@@ -66,6 +66,8 @@
                     effect="dark"
                     :content="$T('MANAGE_SETTING_CLEAR_CACHE_TIPS')"
                     placement="right"
+                    :persistent="false"
+                    teleported
                   >
                     <el-icon>
                       <InfoFilled />
@@ -78,6 +80,8 @@
                 :confirm-button-text="$T('CONFIRM')"
                 :cancel-button-text="$T('CANCEL')"
                 hide-icon
+                :persistent="false"
+                teleported
                 @confirm="handleClearDb"
               >
                 <template #reference>
@@ -101,9 +105,7 @@
               </template>
               <el-switch
                 v-model="form.isShowThumbnail"
-                style="position:absolute;right: 0;"
+                style="position:absolute;right: 0;--el-switch-on-color: #13ce66;--el-switch-off-color: #ff4949;"
-                active-color="#13ce66"
-                inactive-color="#ff4949"
                 @change="handleIsShowThumbnailChange"
               />
             </el-form-item>
@@ -117,11 +119,9 @@
               </template>
               <el-switch
                 v-model="form.isShowList"
-                style="position:absolute;right: 0;"
+                style="position:absolute;right: 0;--el-switch-on-color: #13ce66;--el-switch-off-color: #ff4949;"
                 :active-text="$T('MANAGE_SETTING_SHOW_FILE_LIST_TYPE_LIST')"
                 :inactive-text="$T('MANAGE_SETTING_SHOW_FILE_LIST_TYPE_CARD')"
-                active-color="#13ce66"
-                inactive-color="orange"
                 @change="handleIsShowListChange"
               />
             </el-form-item>
@@ -135,6 +135,8 @@
                     effect="dark"
                     :content="$T('MANAGE_SETTING_FORCE_CUSTOM_URL_HTTPS_TIPS')"
                     placement="right"
+                    :persistent="false"
+                    teleported
                   >
                     <el-icon>
                       <InfoFilled />
@@ -144,9 +146,7 @@
               </template>
               <el-switch
                 v-model="form.isForceCustomUrlHttps"
-                style="position:absolute;right: 0;"
+                style="position:absolute;right: 0;--el-switch-on-color: #13ce66;--el-switch-off-color: #ff4949;"
-                active-color="#13ce66"
-                inactive-color="#ff4949"
                 @change="handleIsForceCustomUrlHttpsChange"
               />
             </el-form-item>
@@ -160,6 +160,8 @@
                     effect="dark"
                     :content="$T('MANAGE_SETTING_ENCODE_URL_WHEN_COPY_TIPS')"
                     placement="right"
+                    :persistent="false"
+                    teleported
                   >
                     <el-icon>
                       <InfoFilled />
@@ -169,9 +171,7 @@
               </template>
               <el-switch
                 v-model="form.isEncodeUrl"
-                style="position:absolute;right: 0;"
+                style="position:absolute;right: 0;--el-switch-on-color: #13ce66;--el-switch-off-color: #ff4949;"
-                active-color="#13ce66"
-                inactive-color="#ff4949"
                 @change="handleIsEncodeUrlChange"
               />
             </el-form-item>
@@ -185,6 +185,8 @@
                     effect="dark"
                     :content="$T('MANAGE_SETTING_KEEP_FOLDER_STRUCTURE_UPLOAD_TIPS')"
                     placement="right"
+                    :persistent="false"
+                    teleported
                   >
                     <el-icon>
                       <InfoFilled />
@@ -194,9 +196,7 @@
               </template>
               <el-switch
                 v-model="form.isUploadKeepDirStructure"
-                style="position:absolute;right: 0;"
+                style="position:absolute;right: 0;--el-switch-on-color: #13ce66;--el-switch-off-color: #ff4949;"
-                active-color="#13ce66"
-                inactive-color="#ff4949"
                 @change="handleIsUploadKeepDirStructureChange"
               />
             </el-form-item>
@@ -212,6 +212,8 @@
                     effect="dark"
                     :content="$T('MANAGE_SETTING_KEEP_FOLDER_STRUCTURE_DOWNLOAD_FILE_TIPS')"
                     placement="right"
+                    :persistent="false"
+                    teleported
                   >
                     <el-icon>
                       <InfoFilled />
@@ -221,9 +223,7 @@
               </template>
               <el-switch
                 v-model="form.isDownloadFileKeepDirStructure"
-                style="position:absolute;right: 0;"
+                style="position:absolute;right: 0;--el-switch-on-color: #13ce66;--el-switch-off-color: #ff4949;"
-                active-color="#13ce66"
-                inactive-color="#ff4949"
                 @change="handleIsDownloadFileKeepDirStructureChange"
               />
             </el-form-item>
@@ -239,6 +239,8 @@
                     effect="dark"
                     :content="$T('MANAGE_SETTING_KEEP_FOLDER_STRUCTURE_DOWNLOAD_FILE_TIPS')"
                     placement="right"
+                    :persistent="false"
+                    teleported
                   >
                     <el-icon>
                       <InfoFilled />
@@ -248,9 +250,7 @@
               </template>
               <el-switch
                 v-model="form.isDownloadFolderKeepDirStructure"
-                style="position:absolute;right: 0;"
+                style="position:absolute;right: 0;--el-switch-on-color: #13ce66;--el-switch-off-color: #ff4949;"
-                active-color="#13ce66"
-                inactive-color="#ff4949"
                 @change="handleIsDownloadFolderKeepDirStructureChange"
               />
             </el-form-item>
@@ -264,6 +264,8 @@
                     effect="dark"
                     :content="$T('MANAGE_SETTING_MAX_DOWNLOAD_FILE_SIZE_TIPS')"
                     placement="right"
+                    :persistent="false"
+                    teleported
                   >
                     <el-icon>
                       <InfoFilled />
@@ -290,6 +292,8 @@
                     effect="dark"
                     :content="$T('MANAGE_SETTING_SEARCH_IGNORE_CASE_TIPS')"
                     placement="right"
+                    :persistent="false"
+                    teleported
                   >
                     <el-icon>
                       <InfoFilled />
@@ -299,9 +303,7 @@
               </template>
               <el-switch
                 v-model="form.isIgnoreCase"
-                style="position:absolute;right: 0;"
+                style="position:absolute;right: 0;--el-switch-on-color: #13ce66;--el-switch-off-color: #ff4949;"
-                active-color="#13ce66"
-                inactive-color="#ff4949"
                 @change="handleisIgnoreCaseChange"
               />
             </el-form-item>
@@ -315,6 +317,8 @@
                     effect="dark"
                     :content="$T('MANAGE_SETTING_TIMESTAMP_RENAME_TIPS')"
                     placement="right"
+                    :persistent="false"
+                    teleported
                   >
                     <el-icon>
                       <InfoFilled />
@@ -324,9 +328,7 @@
               </template>
               <el-switch
                 v-model="form.timestampRename"
-                style="position:absolute;right: 0;"
+                style="position:absolute;right: 0;--el-switch-on-color: #13ce66;--el-switch-off-color: #ff4949;"
-                active-color="#13ce66"
-                inactive-color="#ff4949"
                 @change="handleTimestampRenameChange"
               />
             </el-form-item>
@@ -340,6 +342,8 @@
                     effect="dark"
                     :content="$T('MANAGE_SETTING_RANDOM_STRING_RENAME_TIPS')"
                     placement="right"
+                    :persistent="false"
+                    teleported
                   >
                     <el-icon>
                       <InfoFilled />
@@ -349,9 +353,7 @@
               </template>
               <el-switch
                 v-model="form.randomStringRename"
-                style="position:absolute;right: 0;"
+                style="position:absolute;right: 0;--el-switch-on-color: #13ce66;--el-switch-off-color: #ff4949;"
-                active-color="#13ce66"
-                inactive-color="#ff4949"
                 @change="handleRandomStringRenameChange"
               />
             </el-form-item>
@@ -365,6 +367,8 @@
                     effect="dark"
                     :content="$T('MANAGE_SETTING_CUSTOM_RENAME_TIPS')"
                     placement="right"
+                    :persistent="false"
+                    teleported
                   >
                     <el-icon>
                       <InfoFilled />
@@ -374,9 +378,7 @@
               </template>
               <el-switch
                 v-model="form.customRename"
-                style="position:absolute;right: 0;"
+                style="position:absolute;right: 0;--el-switch-on-color: #13ce66;--el-switch-off-color: #ff4949;"
-                active-color="#13ce66"
-                inactive-color="#ff4949"
                 @change="handleCustomRenameChange"
               />
             </el-form-item>

src/renderer/pages/Gallery.vue

@@ -42,6 +42,8 @@
                 size="small"
                 style="width: 100%"
                 :placeholder="$T('CHOOSE_SHOWED_PICBED')"
+                :persistent="false"
+                teleported
               >
                 <el-option
                   v-for="item in picBed"
@@ -60,6 +62,7 @@
                 start-placeholder="Start date"
                 end-placeholder="End date"
                 size="small"
+                teleported
               />
             </el-col>
             <el-col :span="1">
@@ -75,6 +78,8 @@
                 size="small"
                 style="width: 100%"
                 :placeholder="$T('CHOOSE_PASTE_FORMAT')"
+                :persistent="false"
+                teleported
                 @change="handlePasteStyleChange"
               >
                 <el-option
@@ -91,6 +96,8 @@
                 size="small"
                 style="width: 100%"
                 placeholder="Choose"
+                :persistent="false"
+                teleported
                 @change="handleUseShortUrlChange"
               >
                 <el-option
@@ -102,7 +109,9 @@
               </el-select>
             </el-col>
             <el-col :span="2">
-              <el-dropdown>
+              <el-dropdown
+                teleported
+              >
                 <el-button
                   size="small"
                   type="primary"
@@ -328,6 +337,8 @@
             effect="dark"
             :content="$T('MANAGE_BUCKET_RENAME_FILE_INPUT_A_TIPS')"
             placement="right"
+            :persistent="false"
+            teleported
           >
             <el-icon
               color="#409EFF"
@@ -352,6 +363,8 @@
             effect="light"
             placement="right"
             width="280"
+            :persistent="false"
+            teleported
           >
             <template #reference>
               <el-icon

src/renderer/pages/PicGoSetting.vue

@@ -18,6 +18,7 @@
       stretch
       style="height: calc(100vh - 50px);width: 100%;overflow-x: hidden;top: 50px;position: absolute;"
       tab-position="left"
+      lazy
     >
       <el-tab-pane
         name="system"
@@ -43,6 +44,8 @@
                     size="small"
                     style="width: 50%"
                     :placeholder="$T('SETTINGS_CHOOSE_LANGUAGE')"
+                    :persistent="false"
+                    teleported
                     @change="handleLanguageChange"
                   >
                     <el-option
@@ -61,6 +64,8 @@
                     size="small"
                     style="width: 50%"
                     :placeholder="$T('SETTINGS_START_MODE')"
+                    :persistent="false"
+                    teleported
                     @change="handleStartModeChange"
                   >
                     <el-option
@@ -299,6 +304,8 @@
                     size="small"
                     style="width: 50%"
                     :placeholder="$T('SETTINGS_AUTO_IMPORT_SELECT_PICBED')"
+                    :persistent="false"
+                    teleported
                     @change="handleAutoImportPicBedChange"
                   >
                     <el-option
@@ -434,6 +441,8 @@
                     size="small"
                     style="width: 50%"
                     :placeholder="$T('SETTINGS_SHORT_URL_SERVER')"
+                    :persistent="false"
+                    teleported
                     @change="handleShortUrlServerChange"
                   >
                     <el-option
@@ -487,6 +496,8 @@
                         effect="dark"
                         :content="$T('BUILTIN_CLIPBOARD_TIPS')"
                         placement="right"
+                        :persistent="false"
+                        teleported
                       >
                         <el-icon style="margin-left: 4px">
                           <QuestionFilled />
@@ -864,6 +875,8 @@
             effect="light"
             placement="right"
             width="350"
+            :persistent="false"
+            teleported
           >
             <template #reference>
               <el-icon
@@ -958,6 +971,8 @@
             multiple
             collapse-tags
             style="width: 100%;"
+            :persistent="false"
+            teleported
           >
             <el-option
               v-for="(value, key) of logLevel"
@@ -1080,6 +1095,8 @@
           <el-select
             v-model="sync.type"
             style="width: 100%;"
+            :persistent="false"
+            teleported
           >
             <el-option
               v-for="typeitem of syncType"
@@ -1248,8 +1265,7 @@
         >
           <el-switch
             v-model="waterMarkForm.isAddWatermark"
-            active-color="#13ce66"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-            inactive-color="#ff4949"
           />
         </el-form-item>
         <el-form-item
@@ -1271,8 +1287,7 @@
         >
           <el-switch
             v-model="waterMarkForm.isFullScreenWatermark"
-            active-color="#13ce66"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-            inactive-color="#ff4949"
           />
         </el-form-item>
         <el-form-item
@@ -1343,8 +1358,7 @@
         >
           <el-switch
             v-model="compressForm.isRemoveExif"
-            active-color="#13ce66"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-            inactive-color="#ff4949"
           />
         </el-form-item>
         <el-form-item
@@ -1362,15 +1376,18 @@
         >
           <el-switch
             v-model="compressForm.isConvert"
-            active-color="#13ce66"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-            inactive-color="#ff4949"
           />
         </el-form-item>
         <el-form-item
           v-show="compressForm.isConvert"
           :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT')"
         >
-          <el-select v-model="compressForm.convertFormat">
+          <el-select
+            v-model="compressForm.convertFormat"
+            :persistent="false"
+            teleported
+          >
             <el-option
               v-for="item in availableFormat"
               :key="item"
@@ -1384,8 +1401,7 @@
         >
           <el-switch
             v-model="compressForm.isFlip"
-            active-color="#13ce66"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-            inactive-color="#ff4949"
           />
         </el-form-item>
         <el-form-item
@@ -1393,8 +1409,7 @@
         >
           <el-switch
             v-model="compressForm.isFlop"
-            active-color="#13ce66"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-            inactive-color="#ff4949"
           />
         </el-form-item>
         <el-form-item
@@ -1402,8 +1417,7 @@
         >
           <el-switch
             v-model="compressForm.isReSize"
-            active-color="#13ce66"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-            inactive-color="#ff4949"
           />
         </el-form-item>
         <el-form-item
@@ -1430,8 +1444,7 @@
         >
           <el-switch
             v-model="compressForm.skipReSizeOfSmallImg"
-            active-color="#13ce66"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-            inactive-color="#ff4949"
           />
         </el-form-item>
         <el-form-item
@@ -1440,8 +1453,7 @@
         >
           <el-switch
             v-model="compressForm.skipReSizeOfSmallImg"
-            active-color="#13ce66"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-            inactive-color="#ff4949"
           />
         </el-form-item>
         <el-form-item
@@ -1449,8 +1461,7 @@
         >
           <el-switch
             v-model="compressForm.isReSizeByPercent"
-            active-color="#13ce66"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-            inactive-color="#ff4949"
           />
         </el-form-item>
         <el-form-item
@@ -1467,8 +1478,7 @@
         >
           <el-switch
             v-model="compressForm.isRotate"
-            active-color="#13ce66"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-            inactive-color="#ff4949"
           />
         </el-form-item>
         <el-form-item

src/renderer/pages/Plugin.vue

@@ -5,6 +5,8 @@
       <el-tooltip
         :content="pluginListToolTip"
         placement="right"
+        :persistent="false"
+        teleported
       >
         <el-icon
           class="el-icon-goods"
@@ -16,6 +18,8 @@
       <el-tooltip
         :content="updateAllToolTip"
         placement="left"
+        :persistent="false"
+        teleported
       >
         <el-icon
           class="el-icon-update"
@@ -30,6 +34,8 @@
       >
         <el-icon
           class="el-icon-download"
+          :persistent="false"
+          teleported
           @click="handleImportLocalPlugin"
         >
           <Download />

src/renderer/pages/Upload.vue

@@ -12,6 +12,8 @@
             placement="top"
             effect="light"
             :content="$T('UPLOAD_VIEW_HINT')"
+            :persistent="false"
+            teleported
           >
             <span
               id="upload-view-title"
@@ -170,8 +172,7 @@
         >
           <el-switch
             v-model="waterMarkForm.isAddWatermark"
-            active-color="#13ce66"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-            inactive-color="#ff4949"
           />
         </el-form-item>
         <el-form-item
@@ -193,8 +194,7 @@
         >
           <el-switch
             v-model="waterMarkForm.isFullScreenWatermark"
-            active-color="#13ce66"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-            inactive-color="#ff4949"
           />
         </el-form-item>
         <el-form-item
@@ -265,8 +265,7 @@
         >
           <el-switch
             v-model="compressForm.isRemoveExif"
-            active-color="#13ce66"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-            inactive-color="#ff4949"
           />
         </el-form-item>
         <el-form-item
@@ -284,15 +283,18 @@
         >
           <el-switch
             v-model="compressForm.isConvert"
-            active-color="#13ce66"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-            inactive-color="#ff4949"
           />
         </el-form-item>
         <el-form-item
           v-show="compressForm.isConvert"
           :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT')"
         >
-          <el-select v-model="compressForm.convertFormat">
+          <el-select
+            v-model="compressForm.convertFormat"
+            :persistent="false"
+            teleported
+          >
             <el-option
               v-for="item in availableFormat"
               :key="item"
@@ -306,8 +308,7 @@
         >
           <el-switch
             v-model="compressForm.isFlip"
-            active-color="#13ce66"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-            inactive-color="#ff4949"
           />
         </el-form-item>
         <el-form-item
@@ -315,8 +316,7 @@
         >
           <el-switch
             v-model="compressForm.isFlop"
-            active-color="#13ce66"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-            inactive-color="#ff4949"
           />
         </el-form-item>
         <el-form-item
@@ -324,8 +324,7 @@
         >
           <el-switch
             v-model="compressForm.isReSize"
-            active-color="#13ce66"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-            inactive-color="#ff4949"
           />
         </el-form-item>
         <el-form-item
@@ -352,8 +351,7 @@
         >
           <el-switch
             v-model="compressForm.skipReSizeOfSmallImg"
-            active-color="#13ce66"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-            inactive-color="#ff4949"
           />
         </el-form-item>
         <el-form-item
@@ -362,8 +360,7 @@
         >
           <el-switch
             v-model="compressForm.skipReSizeOfSmallImg"
-            active-color="#13ce66"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-            inactive-color="#ff4949"
           />
         </el-form-item>
         <el-form-item
@@ -371,8 +368,7 @@
         >
           <el-switch
             v-model="compressForm.isReSizeByPercent"
-            active-color="#13ce66"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-            inactive-color="#ff4949"
           />
         </el-form-item>
         <el-form-item
@@ -389,8 +385,7 @@
         >
           <el-switch
             v-model="compressForm.isRotate"
-            active-color="#13ce66"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
-            inactive-color="#ff4949"
           />
         </el-form-item>
         <el-form-item

src/renderer/pages/picbeds/index.vue

@@ -68,6 +68,7 @@
                   placement="top"
                   style="color: #fff; font-size: 12px;width: 100%;"
                   :disabled="picBedConfigList.length === 0"
+                  teleported
                 >
                   {{ $T('MANAGE_LOGIN_PAGE_PANE_IMPORT') }}
                   <template #dropdown>

src/universal/types/i18n.d.ts

@@ -683,6 +683,7 @@ interface ILocales {
   MANAGE_BUCKET_SORT_TYPE: string
   MANAGE_BUCKET_SORT_TIME: string
   MANAGE_BUCKET_SORT_SELECTED: string
+  MANAGE_BUCKET_INIT: string
   MANAGE_BUCKET_URL_UPLOAD_DIALOG_TITLE: string
   MANAGE_BUCKET_URL_UPLOAD_DIALOG_CONFIRM: string
   MANAGE_BUCKET_URL_UPLOAD_DIALOG_CANCEL: string