✨ 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/bucketPage.vue

@@ -19,6 +19,8 @@
           v-model="currentCustomDomain"
           :placeholder="$T('MANAGE_BUCKET_PAGE_CUSTOM_URL_SELECT_PLACEHOLDER')"
           style="width: 200px;"
+          :persistent="false"
+          teleported
           @change="handleChangeCustomUrl"
         >
           <el-option
@@ -54,6 +56,8 @@
             effect="dark"
             :content="$T('MANAGE_BUCKET_PAGE_UPLOAD_FILES_TOOLTIP')"
             placement="bottom"
+            :persistent="false"
+            teleported
           >
             <el-icon
               class="icon"
@@ -74,6 +78,8 @@
             effect="dark"
             :content="$T('MANAGE_BUCKET_PAGE_UPLOAD_FROM_URL_TOOLTIP')"
             placement="bottom"
+            :persistent="false"
+            teleported
           >
             <el-icon
               class="icon"
@@ -97,6 +103,8 @@
             effect="dark"
             :content="$T('MANAGE_BUCKET_PAGE_CREATE_FOLDER_TOOLTIP')"
             placement="bottom"
+            :persistent="false"
+            teleported
           >
             <el-icon
               class="icon"
@@ -117,6 +125,8 @@
             effect="dark"
             :content="$T('MANAGE_BUCKET_PAGE_DOWNLOAD_TOOLTIP')"
             placement="bottom"
+            :persistent="false"
+            teleported
           >
             <el-icon
               class="icon"
@@ -137,6 +147,8 @@
             effect="dark"
             :content="$T('MANAGE_BUCKET_PAGE_BATCH_RENAME_TOOLTIP')"
             placement="bottom"
+            :persistent="false"
+            teleported
           >
             <el-icon
               class="icon"
@@ -155,8 +167,12 @@
             effect="dark"
             :content="$T('MANAGE_BUCKET_PAGE_BATCH_COPY_URL_TOOLTIP')"
             placement="right"
+            :persistent="false"
+            teleported
+          >
+            <el-dropdown
+              teleported
             >
-            <el-dropdown>
               <el-icon
                 class="icon"
                 size="25px"
@@ -196,6 +212,8 @@
             effect="dark"
             :content="$T('MANAGE_BUCKET_PAGE_COPY_FILE_INFO_TOOLTIP')"
             placement="bottom"
+            :persistent="false"
+            teleported
           >
             <el-icon
               class="icon"
@@ -219,6 +237,8 @@
             effect="dark"
             :content="$T('MANAGE_BUCKET_PAGE_FORCE_REFRESH_TOOLTIP')"
             placement="bottom"
+            :persistent="false"
+            teleported
           >
             <el-icon
               id="refresh"
@@ -237,7 +257,6 @@
         style="margin-left: 10px;width: 200px;"
         clearable
         size="small"
-        @clear="searchText = ''"
       />
     </div>
     <div class="header-dir-view">
@@ -299,7 +318,7 @@
         </div>
       </div>
       <div
-        v-show="selectedItems.length === 0"
+        v-if="selectedItems.length === 0"
         class="header-buttom-view"
       >
         <el-button
@@ -314,7 +333,7 @@
         </el-button>
       </div>
       <div
-        v-show="selectedItems.length > 0"
+        v-if="selectedItems.length > 0"
         class="header-buttom-view"
       >
         <el-button
@@ -368,7 +387,9 @@
           {{ `${$T('MANAGE_BUCKET_DELETE_BTN')}${selectedItems.length}` }}
         </el-button>
       </div>
-      <el-dropdown>
+      <el-dropdown
+        teleported
+      >
         <el-button
           size="small"
           type="primary"
@@ -393,6 +414,9 @@
           <el-dropdown-item @click="sortFile('check')">
             {{ $T('MANAGE_BUCKET_SORT_SELECTED') }}
           </el-dropdown-item>
+          <el-dropdown-item @click="sortFile('init')">
+            {{ $T('MANAGE_BUCKET_INIT') }}
+          </el-dropdown-item>
         </template>
       </el-dropdown>
       <el-button-group
@@ -428,6 +452,7 @@
       draggable
       center
       align-center
+      append-to-body
     >
       <el-input
         v-model="urlToUpload"
@@ -451,7 +476,7 @@ https://www.baidu.com/img/bd_logo1.png"
       </template>
     </el-dialog>
     <div
-      v-show="layoutStyle === 'list'"
+      v-if="layoutStyle === 'list'"
       class="layout-table"
       style="margin: 0 15px 15px 15px;overflow-y: auto;overflow-x: hidden;height: 80vh;"
     >
@@ -462,7 +487,7 @@ https://www.baidu.com/img/bd_logo1.png"
           <el-table-v2
             ref="fileTable"
             :columns="columns "
-            :data="currentPageFilesInfo"
+            :data="filterList"
             :row-class="rowClass"
             :width="width"
             :height="height"
@@ -471,7 +496,7 @@ https://www.baidu.com/img/bd_logo1.png"
       </el-auto-resizer>
     </div>
     <div
-      v-show="layoutStyle === 'grid'"
+      v-if="layoutStyle === 'grid'"
       class="layout-grid"
       style="margin: 0 15px 15px 15px;overflow-y: auto;overflow-x: hidden;height: 80vh;"
     >
@@ -482,7 +507,7 @@ https://www.baidu.com/img/bd_logo1.png"
           :gutter="16"
         >
           <el-col
-            v-for="(item,index) in currentPageFilesInfo"
+            v-for="(item,index) in filterList"
             :key="index"
             :xs="24"
             :sm="12"
@@ -491,7 +516,6 @@ https://www.baidu.com/img/bd_logo1.png"
             :xl="2"
           >
             <el-card
-              v-if="item.match || !searchText"
               :body-style="{ padding: '0px', height: '150px', width: '100%', background: item.checked ? '#f2f2f2' : '#fff' }"
               style="margin-bottom: 10px;"
               shadow="hover"
@@ -555,6 +579,8 @@ https://www.baidu.com/img/bd_logo1.png"
                   placement="top"
                   effect="light"
                   :content="item.fileName"
+                  :persistent="false"
+                  teleported
                 >
                   <el-link
                     style="font-size: 12px;font-family: Arial, Helvetica, sans-serif;"
@@ -589,7 +615,9 @@ https://www.baidu.com/img/bd_logo1.png"
                   >
                     <Download />
                   </el-icon>
-                  <el-dropdown>
+                  <el-dropdown
+                    teleported
+                  >
                     <template #default>
                       <el-icon
                         size="15"
@@ -677,7 +705,7 @@ https://www.baidu.com/img/bd_logo1.png"
                 <el-checkbox
                   v-model="item.checked"
                   size="large"
-                  @change="handleCheckChange(item)"
+                  @change="handleCheckChangeOther(item)"
                 />
               </el-row>
             </el-card>
@@ -699,6 +727,7 @@ https://www.baidu.com/img/bd_logo1.png"
       center
       align-center
       draggable
+      append-to-body
     >
       <template #header>
         <el-button
@@ -767,6 +796,7 @@ https://www.baidu.com/img/bd_logo1.png"
     <el-drawer
       v-model="isShowUploadPanel"
       size="60%"
+      append-to-body
       @open="startRefreshUploadTask"
       @close="stopRefreshUploadTask"
     >
@@ -788,7 +818,7 @@ https://www.baidu.com/img/bd_logo1.png"
         @click="openFileSelectDialog"
       >
         <div
-          v-show="!tableData.length"
+          v-if="!tableData.length"
           id="upload-dragger"
           style="position: relative;top: 0;right: 0;heigth: 100%;width: 100%;display: flex;justify-content: center;align-items: center;"
         >
@@ -841,6 +871,7 @@ https://www.baidu.com/img/bd_logo1.png"
       <el-tabs
         v-model="activeUpLoadTab"
         stretch
+        lazy
       >
         <el-tab-pane
           name="uploading"
@@ -1007,12 +1038,14 @@ https://www.baidu.com/img/bd_logo1.png"
       v-model="isShowDownloadPanel"
       :title="$T('MANAGE_BUCKET_DOWNLOAD_PAGE_TITLE')"
       size="60%"
+      append-to-body
       @open="startRefreshDownloadTask"
       @close="stopRefreshDownloadTask"
     >
       <el-tabs
         v-model="activeDownLoadTab"
         stretch
+        lazy
       >
         <el-tab-pane
           name="downloading"
@@ -1209,6 +1242,7 @@ https://www.baidu.com/img/bd_logo1.png"
       close-on-press-escape
       show-close
       destroy-on-close
+      append-to-body
     >
       <div
         style="-webkit-user-select: text"
@@ -1233,6 +1267,7 @@ https://www.baidu.com/img/bd_logo1.png"
       close-on-press-escape
       show-close
       destroy-on-close
+      append-to-body
     >
       <highlightjs
         style="-webkit-user-select: text;"
@@ -1258,6 +1293,7 @@ https://www.baidu.com/img/bd_logo1.png"
       close-on-press-escape
       show-close
       destroy-on-close
+      append-to-body
     >
       <video-player
         :src="videoFileUrl"
@@ -1285,6 +1321,7 @@ https://www.baidu.com/img/bd_logo1.png"
       align-center
       draggable
       destroy-on-close
+      append-to-body
       @close="() => {
         isSingleRename = false
         isRenameIncludeExt = false
@@ -1295,11 +1332,13 @@ https://www.baidu.com/img/bd_logo1.png"
         style="margin-bottom: 10px;"
       >
         <span>
-          {{ $T('MANAGE_BUCKET_RENAME_FILE_INPUT_A') }}
+          {{ $T('MANAGE_BUCKET_RENAME_FILE_INPUT_A') }}  - Matched: {{ matchedFilesNumber }}
           <el-tooltip
             effect="dark"
             :content="$T('MANAGE_BUCKET_RENAME_FILE_INPUT_A_TIPS')"
             placement="right"
+            :persistent="false"
+            teleported
           >
             <el-icon
               color="#409EFF"
@@ -1324,6 +1363,8 @@ https://www.baidu.com/img/bd_logo1.png"
             effect="light"
             placement="right"
             width="280"
+            :persistent="false"
+            teleported
           >
             <template #reference>
               <el-icon
@@ -1381,6 +1422,8 @@ https://www.baidu.com/img/bd_logo1.png"
             effect="dark"
             :content="$T('MANAGE_BUCKET_RENAME_FILE_EXT_TIPS')"
             placement="right"
+            :persistent="false"
+            teleported
           >
             <el-icon
               color="#409EFF"
@@ -1527,6 +1570,8 @@ const linkFormatArray = [
   { key: 'Custom', value: 'custom' }
 ]
 
+type sortTypeList = 'name' | 'size' | 'time' | 'ext' | 'check' | 'init'
+
 // 路由相关
 const route = useRoute()
 // 页面状态变量相关
@@ -1555,7 +1600,6 @@ const fileSortSizeReverse = ref(false)
 const fileSortTimeReverse = ref(false)
 // 页面搜索相关
 const searchText = ref('')
-const selectedItems = reactive([] as any[])
 // 上传页面相关
 const isDragover = ref(false)
 const tableData = reactive([] as any[])
@@ -1584,7 +1628,13 @@ const dialogVisible = ref(false)
 const urlToUpload = ref('')
 // 图片预览相关
 const previewedImage = ref('')
-const ImagePreviewList = computed(() => currentPageFilesInfo.filter(item => item.isImage).map(item => item.url))
+const filterList = computed(() => {
+  return getList()
+})
+const selectedItems = computed(() => filterList.value.filter(item => item.checked))
+
+const ImagePreviewList = computed(() => filterList.value.filter(item => item.isImage).map(item => item.url))
+
 const getCurrentPreviewIndex = computed(() => ImagePreviewList.value.indexOf(previewedImage.value))
 // 快捷键相关
 const isShiftKeyPress = ref<boolean>(false)
@@ -1626,6 +1676,19 @@ const isShowCreateNewFolder = computed(() => ['aliyun', 'github', 'local', 'qini
 
 const isShowPresignedUrl = computed(() => ['aliyun', 'github', 'qiniu', 's3plist', 'tcyun', 'webdavplist'].includes(currentPicBedName.value))
 
+function getList () {
+  if (!searchText.value) {
+    return currentPageFilesInfo
+  }
+  return currentPageFilesInfo.filter((item: any) => {
+    if (isIgnoreCase.value) {
+      return item.fileName.toLowerCase().includes(searchText.value.toLowerCase())
+    } else {
+      return item.fileName.includes(searchText.value)
+    }
+  })
+}
+
 // 上传相关函数
 
 function handleUploadKeepDirChange (val: any) {
@@ -1762,7 +1825,7 @@ function webkitReadDataTransfer (dataTransfer: DataTransfer) {
             entry.file((file: any) => {
               readFiles(file, entry.fullPath)
             }, (err: any) => {
-              console.log(err)
+              console.error(err)
             })
           } else if (entry.isDirectory) {
             readDirectory(entry.createReader())
@@ -1773,7 +1836,7 @@ function webkitReadDataTransfer (dataTransfer: DataTransfer) {
         decrement()
       }
     }, (err: any) => {
-      console.log(err)
+      console.error(err)
     })
   }
 
@@ -2155,7 +2218,6 @@ async function resetParam (force: boolean = false) {
   currentPageNumber.value = 1
   currentPageFilesInfo.length = 0
   currentDownloadFileList.length = 0
-  selectedItems.length = 0
   searchText.value = ''
   urlToUpload.value = ''
   dialogVisible.value = false
@@ -2172,10 +2234,8 @@ async function resetParam (force: boolean = false) {
     const cachedData = await searchExistFileList()
     if (cachedData.length > 0) {
       currentPageFilesInfo.push(...cachedData[0].value.fullList)
-      const sortType = localStorage.getItem('sortType') as 'name' | 'size' | 'time' | 'ext' | 'check' | 'init' || ''
+      const sortType = localStorage.getItem('sortType') as sortTypeList || 'init'
-      if (['name', 'time', 'size', 'ext'].includes(sortType as string)) {
       sortFile(sortType)
-      }
       isShowLoadingPage.value = false
       return
     }
@@ -2183,14 +2243,9 @@ async function resetParam (force: boolean = false) {
   if (paging.value) {
     const res = await getBucketFileList() as IStringKeyMap
     if (res.success) {
-      res.fullList.sort((a: any, b: any) => {
-        return b.isDir - a.isDir || a.fileName.localeCompare(b.fileName)
-      })
       currentPageFilesInfo.push(...res.fullList)
-      const sortType = localStorage.getItem('sortType') as 'name' | 'size' | 'time' | 'ext' | 'check' | 'init' || ''
+      const sortType = localStorage.getItem('sortType') as sortTypeList || 'init'
-      if (['name', 'time', 'size', 'ext'].includes(sortType as string)) {
       sortFile(sortType)
-      }
       if (res.isTruncated && paging.value) {
         pagingMarkerStack.push(pagingMarker.value)
         pagingMarker.value = res.nextMarker
@@ -2260,12 +2315,11 @@ const changePage = async (cur: number | undefined, prev: number | undefined) =>
   }
   const isForwardNavigation = cur > prev
   const newPageNumber = isForwardNavigation ? prev + 1 : prev - 1
-  const sortType = localStorage.getItem('sortType') as 'name' | 'size' | 'time' | 'ext' | 'check' | 'init' || ''
+  const sortType = localStorage.getItem('sortType') as sortTypeList || 'init'
 
   isShowLoadingPage.value = true
   currentPageNumber.value = newPageNumber
   currentPageFilesInfo.length = 0
-  selectedItems.length = 0
   searchText.value = ''
   urlToUpload.value = ''
   dialogVisible.value = false
@@ -2289,12 +2343,9 @@ const changePage = async (cur: number | undefined, prev: number | undefined) =>
     return
   }
 
-  res.fullList.sort((a: any) => (a.isDir ? -1 : 1))
   currentPageFilesInfo.push(...res.fullList)
 
-  if (['name', 'time', 'size', 'ext'].includes(sortType as string)) {
   sortFile(sortType)
-  }
 
   if (!(cur < prev && !paging.value)) {
     if (res.isTruncated) {
@@ -2311,27 +2362,6 @@ const changePage = async (cur: number | undefined, prev: number | undefined) =>
   }
 }
 
-watch(searchText, () => searchAndSort())
-
-function searchAndSort () {
-  fileTable.value.scrollToRow(0)
-
-  const shouldIgnoreCase = isIgnoreCase.value
-
-  currentPageFilesInfo.forEach((item: any) => {
-    const fileName = shouldIgnoreCase ? item.fileName.toLowerCase() : item.fileName
-    const search = shouldIgnoreCase ? searchText.value.toLowerCase() : searchText.value
-    item.match = searchText.value ? fileName.includes(search) : true
-  })
-
-  if (searchText.value) {
-    currentPageFilesInfo.sort((a: any, b: any) => b.match - a.match)
-  } else {
-    const sortType = localStorage.getItem('sortType') as 'name' | 'size' | 'time' | 'ext' | 'check' | 'init' || 'init'
-    sortFile(sortType)
-  }
-}
-
 function sortFile (type: 'name' | 'size' | 'time' | 'ext' | 'check' | 'init') {
   switch (type) {
     case 'name':
@@ -2340,9 +2370,8 @@ function sortFile (type: 'name' | 'size' | 'time' | 'ext' | 'check' | 'init') {
       currentPageFilesInfo.sort((a: any, b: any) => {
         if (fileSortNameReverse.value) {
           return a.fileName.localeCompare(b.fileName)
-        } else {
-          return b.fileName.localeCompare(a.fileName)
         }
+        return b.fileName.localeCompare(a.fileName)
       })
       break
     case 'size':
@@ -2351,9 +2380,8 @@ function sortFile (type: 'name' | 'size' | 'time' | 'ext' | 'check' | 'init') {
       currentPageFilesInfo.sort((a: any, b: any) => {
         if (fileSortSizeReverse.value) {
           return a.fileSize - b.fileSize
-        } else {
-          return b.fileSize - a.fileSize
         }
+        return b.fileSize - a.fileSize
       })
       break
     case 'time':
@@ -2362,9 +2390,8 @@ function sortFile (type: 'name' | 'size' | 'time' | 'ext' | 'check' | 'init') {
       currentPageFilesInfo.sort((a: any, b: any) => {
         if (fileSortTimeReverse.value) {
           return new Date(a.formatedTime).getTime() - new Date(b.formatedTime).getTime()
-        } else {
-          return new Date(b.formatedTime).getTime() - new Date(a.formatedTime).getTime()
         }
+        return new Date(b.formatedTime).getTime() - new Date(a.formatedTime).getTime()
       })
       break
     case 'ext':
@@ -2373,17 +2400,18 @@ function sortFile (type: 'name' | 'size' | 'time' | 'ext' | 'check' | 'init') {
       currentPageFilesInfo.sort((a: any, b: any) => {
         if (fileSortExtReverse.value) {
           return getExtension(a.fileName).localeCompare(getExtension(b.fileName))
-        } else {
-          return getExtension(b.fileName).localeCompare(getExtension(a.fileName))
         }
+        return getExtension(b.fileName).localeCompare(getExtension(a.fileName))
       })
       break
     case 'check':
+      localStorage.setItem('sortType', 'check')
       currentPageFilesInfo.sort((a: any, b: any) => {
         return b.checked - a.checked
       })
       break
     case 'init':
+      localStorage.setItem('sortType', 'init')
       currentPageFilesInfo.sort((a: any, b: any) => {
         return b.isDir - a.isDir || a.fileName.localeCompare(b.fileName)
       })
@@ -2394,41 +2422,16 @@ function handleCancelCheck () {
   currentPageFilesInfo.forEach((item: any) => {
     item.checked = false
   })
-  selectedItems.length = 0
 }
 
 function handleReverseCheck () {
   currentPageFilesInfo.forEach((item: any) => {
     item.checked = !item.checked
-    if (item.checked) {
-      selectedItems.push(item)
-    } else {
-      selectedItems.splice(selectedItems.findIndex((i: any) => i.fileName === item.fileName), 1)
-    }
   })
 }
 
 function handleCheckChangeOther (item: any) {
   item.checked = !item.checked
-  handleCheckChange(item)
-}
-
-function handleCheckChange (item: any) {
-  const index = currentPageFilesInfo.findIndex((i: any) => i.fileName === item.fileName)
-  if (item.checked) {
-    if (lastChoosed.value !== -1 && isShiftKeyPress.value) {
-      const [start, end] = [lastChoosed.value, index].sort((a, b) => a - b)
-      for (let i = start + 1; i <= end; i++) {
-        currentPageFilesInfo[i].checked = true
-        selectedItems.push(currentPageFilesInfo[i])
-      }
-    } else {
-      selectedItems.push(item)
-    }
-    lastChoosed.value = index
-  } else {
-    selectedItems.splice(selectedItems.findIndex((i: any) => i.fileName === item.fileName), 1)
-  }
 }
 
 async function handleFolderBatchDownload (item: any) {
@@ -2522,7 +2525,7 @@ async function handleBatchDownload () {
     maxDownloadFileCount: manageStore.config.settings.maxDownloadFileCount ? manageStore.config.settings.maxDownloadFileCount : 5,
     fileArray: [] as any[]
   }
-  selectedItems.forEach((item: any) => {
+  selectedItems.value.forEach((item: any) => {
     if (!item.isDir) {
       param.fileArray.push({
         alias: configMap.alias,
@@ -2543,13 +2546,9 @@ async function handleBatchDownload () {
 }
 
 function handleCheckAllChange () {
-  const isSearchEmpty = searchText.value === ''
+  const allSelected = selectedItems.value.length === filterList.value.length
-  const itemsToCheck = isSearchEmpty ? currentPageFilesInfo : currentPageFilesInfo.filter((item: any) => item.match)
+  filterList.value.forEach((item: any) => {
-  const allSelected = selectedItems.length === itemsToCheck.length
+    item.checked = !allSelected
-  selectedItems.length = 0
-  currentPageFilesInfo.forEach((item: any) => {
-    item.checked = !allSelected && (isSearchEmpty || item.match)
-    if (item.checked) selectedItems.push(item)
   })
 }
 
@@ -2619,6 +2618,25 @@ function handleBatchRenameFile () {
   isShowBatchRenameDialog.value = true
 }
 
+const matchedFilesNumber = computed(() => {
+  if (!batchRenameMatch.value) {
+    return 0
+  }
+  const matchedFiles = [] as any[]
+  currentPageFilesInfo.forEach((item: any) => {
+    if (isRenameIncludeExt.value) {
+      if (customStrMatch(item.fileName, batchRenameMatch.value) && !item.isDir) {
+        matchedFiles.push(item)
+      }
+    } else {
+      if (customStrMatch(item.fileName.split('.')[0], batchRenameMatch.value) && !item.isDir) {
+        matchedFiles.push(item)
+      }
+    }
+  })
+  return matchedFiles.length
+})
+
 async function BatchRename () {
   isShowBatchRenameDialog.value = false
   if (batchRenameMatch.value === '') {
@@ -2745,25 +2763,25 @@ async function BatchRename () {
 }
 
 function handleBatchCopyInfo () {
-  if (selectedItems.length === 0) {
+  if (selectedItems.value.length === 0) {
     ElMessage.warning($T('MANAGE_BUCKET_BATCH_COPY_INFO_ERROR_MSG'))
     return
   }
   const result = {} as IStringKeyMap
-  selectedItems.forEach((item: any) => {
+  selectedItems.value.forEach((item: any) => {
     result[item.fileName] = item
   })
   clipboard.writeText(JSON.stringify(result, null, 2))
-  ElMessage.success(`${$T('MANAGE_BUCKET_BATCH_COPY_INFO_MSG_A')} ${selectedItems.length} ${$T('MANAGE_BUCKET_BATCH_COPY_INFO_MSG_B')}`)
+  ElMessage.success(`${$T('MANAGE_BUCKET_BATCH_COPY_INFO_MSG_A')} ${selectedItems.value.length} ${$T('MANAGE_BUCKET_BATCH_COPY_INFO_MSG_B')}`)
 }
 
 async function handleBatchCopyLink (type: string) {
-  if (!selectedItems.length) {
+  if (!selectedItems.value.length) {
     ElMessage.warning($T('MANAGE_BUCKET_BATCH_COPY_URL_ERROR_MSG'))
     return
   }
   const result = [] as string[]
-  for (const item of selectedItems) {
+  for (const item of selectedItems.value) {
     if (!item.isDir) {
       const preSignedUrl = type === 'preSignedUrl' ? await getPreSignedUrl(item) : null
       const url = await formatLink(preSignedUrl || item.url, item.fileName, type, manageStore.config.settings.customPasteFormat)
@@ -2830,15 +2848,9 @@ async function getBucketFileListBackStage () {
   })
   const interval = setInterval(() => {
     const currentFileList = fileTransferStore.getFileTransferList()
-    currentFileList.sort((a: any, b: any) => {
+    currentPageFilesInfo.splice(0, currentPageFilesInfo.length, ...currentFileList)
-      return b.isDir - a.isDir || a.fileName.localeCompare(b.fileName)
+    const sortType = localStorage.getItem('sortType') as sortTypeList || 'init'
-    })
-    currentPageFilesInfo.length = 0
-    currentPageFilesInfo.push(...currentFileList)
-    const sortType = localStorage.getItem('sortType') as 'name' | 'size' | 'time' | 'ext' | 'check' | 'init' || ''
-    if (['name', 'time', 'size', 'ext'].includes(sortType as string)) {
     sortFile(sortType)
-    }
     const table = fileCacheDbInstance.table(currentPicBedName.value)
     table.put({
       key: getTableKeyOfDb(),
@@ -2885,7 +2897,7 @@ async function getBucketFileList () {
 }
 
 function handleBatchDeleteInfo () {
-  const confirmTitle = `${$T('MANAGE_BUCKET_BATCH_DELETE_CONFIRM_TITLE_A')} ${selectedItems.length} ${$T('MANAGE_BUCKET_BATCH_DELETE_CONFIRM_TITLE_B')}`
+  const confirmTitle = `${$T('MANAGE_BUCKET_BATCH_DELETE_CONFIRM_TITLE_A')} ${selectedItems.value.length} ${$T('MANAGE_BUCKET_BATCH_DELETE_CONFIRM_TITLE_B')}`
   ElMessageBox.confirm(confirmTitle, $T('MANAGE_BUCKET_BATCH_DELETE_CONFIRM_MSG'), {
     confirmButtonText: $T('MANAGE_BUCKET_BATCH_DELETE_CONFIRM_CONFIRM'),
     cancelButtonText: $T('MANAGE_BUCKET_BATCH_DELETE_CONFIRM_CANCEL'),
@@ -2893,7 +2905,7 @@ function handleBatchDeleteInfo () {
     center: true,
     draggable: true
   }).then(async () => {
-    const copiedSelectedItems = JSON.parse(JSON.stringify(selectedItems))
+    const copiedSelectedItems = JSON.parse(JSON.stringify(selectedItems.value))
     let successCount = 0
     let failCount = 0
 
@@ -2911,7 +2923,6 @@ function handleBatchDeleteInfo () {
       if (result) {
         successCount++
         currentPageFilesInfo.splice(currentPageFilesInfo.findIndex((j: any) => j.key === item.key), 1)
-        selectedItems.splice(selectedItems.findIndex((j: any) => j.key === item.key), 1)
         if (!paging.value) {
           const table = fileCacheDbInstance.table(currentPicBedName.value)
           table.where('key').equals(getTableKeyOfDb()).modify((l: any) => {
@@ -2975,7 +2986,6 @@ function handleDeleteFile (item: any) {
     if (res) {
       ElMessage.success($T('MANAGE_BUCKET_DELETE_SUCCESS'))
       currentPageFilesInfo.splice(currentPageFilesInfo.findIndex((i: any) => i.key === item.key), 1)
-      selectedItems.splice(selectedItems.findIndex((i: any) => i.key === item.key), 1)
       if (!paging.value) {
         const table = fileCacheDbInstance.table(currentPicBedName.value)
         table.where('key').equals(getTableKeyOfDb()).modify((l: any) => {
@@ -2998,7 +3008,7 @@ function handleRenameFile (item: any) {
 }
 
 function singleRename () {
-  const index = currentPageFilesInfo.findIndex((i: any) => i === itemToBeRenamed.value)
+  const index = filterList.value.findIndex((i: any) => i === itemToBeRenamed.value)
   isShowBatchRenameDialog.value = false
   if (batchRenameMatch.value === '') {
     batchRenameMatch.value = '.+'
@@ -3380,13 +3390,11 @@ const columns: Column<any>[] = [
     dataKey: 'checked',
     width: 30,
     cellRenderer: ({ rowData: item }) => (
-      item.match || !searchText.value
+      <ElCheckbox
-        ? <ElCheckbox
         v-model={item.checked}
-          onChange={() => handleCheckChange(item)}
+        onChange={() => handleCheckChangeOther(item)}
       >
       </ElCheckbox>
-        : <template></template>
     )
   },
   {
@@ -3394,12 +3402,13 @@ const columns: Column<any>[] = [
     title: '',
     width: 30,
     cellRenderer: ({ rowData: item }) => (
-      item.match || !searchText.value
+      <ElPopover
-        ? <ElPopover
         trigger="hover"
         width="200"
         disabled={!item.isImage}
         placement="right"
+        persistent={false}
+        teleported={true}
       >
         {{
           reference: () => (
@@ -3429,7 +3438,7 @@ const columns: Column<any>[] = [
           ),
           default: () => (
             <ElImage
-                src={item.url}
+              src={item.isImage ? item.url : require(`./assets/icons/${getFileIconPath(item.fileName ?? '')}`) }
               fit="contain"
             >
               {{
@@ -3447,7 +3456,6 @@ const columns: Column<any>[] = [
           )
         }}
       </ElPopover>
-        : <template></template>
     )
   },
   {
@@ -3456,8 +3464,7 @@ const columns: Column<any>[] = [
     dataKey: 'fileName',
     width: 300,
     cellRenderer: ({ cellData: fileName, rowData: item }) => (
-      item.match || !searchText.value
+      <div
-        ? <div
         onClick={() => handleClickFile(item)}
       >
         <ElTooltip
@@ -3471,7 +3478,6 @@ const columns: Column<any>[] = [
           </div>
         </ElTooltip>
       </div>
-        : <template></template>
     )
   },
   {
@@ -3479,8 +3485,7 @@ const columns: Column<any>[] = [
     title: '',
     width: 30,
     cellRenderer: ({ rowData: item }) => (
-      item.match || !searchText.value
+      item.isDir || !isShowRenameFileIcon.value
-        ? item.isDir || !isShowRenameFileIcon.value
         ? item.isDir
           ? <ElIcon
             size="15"
@@ -3501,7 +3506,6 @@ const columns: Column<any>[] = [
         >
           <Edit />
         </ElIcon>
-        : <template></template>
     )
   },
   {
@@ -3509,14 +3513,15 @@ const columns: Column<any>[] = [
     title: '',
     width: 30,
     cellRenderer: ({ rowData: item }) => (
-      item.match || !searchText.value
+      <ElTooltip
-        ? <ElTooltip
         placement="top"
         content={$T('MANAGE_BUCKET_FILE_COLUMN_COPY_URL')}
         effect='light'
         hide-after={150}
       >
-          <ElDropdown>
+        <ElDropdown
+          teleported={true}
+        >
           {{
             default: () => (
               <ElIcon
@@ -3576,7 +3581,6 @@ const columns: Column<any>[] = [
           }}
         </ElDropdown>
       </ElTooltip>
-        : <template></template>
     )
   },
   {
@@ -3584,8 +3588,7 @@ const columns: Column<any>[] = [
     title: '',
     width: 30,
     cellRenderer: ({ rowData: item }) => (
-      item.match || !searchText.value
+      <ElTooltip
-        ? <ElTooltip
         placement="top"
         content={$T('MANAGE_BUCKET_FILE_COLUMN_INFO')}
         effect='light'
@@ -3601,17 +3604,14 @@ const columns: Column<any>[] = [
           <Document />
         </ElIcon>
       </ElTooltip>
-        : <template></template>
     )
   },
   {
     key: 'placeholder',
     title: '',
     width: 30,
-    cellRenderer: ({ rowData: item }) => (
+    cellRenderer: () => (
-      item.match || !searchText.value
+      <span></span>
-        ? <span></span>
-        : <template></template>
     )
   },
   {
@@ -3620,14 +3620,12 @@ const columns: Column<any>[] = [
     width: 100,
     dataKey: 'fileSize',
     cellRenderer: ({ cellData: fileSize, rowData: item }) => (
-      item.match || !searchText.value
+      <div
-        ? <div
         style="font-size: 14px;color: #303133;font-family: Arial, Helvetica, sans-serif;height: 100%;display: flex;align-items: center;"
         onClick={() => handleCheckChangeOther(item)}
       >
         {formatFileSize(fileSize)}
       </div>
-        : <template></template>
     )
   },
   {
@@ -3636,14 +3634,12 @@ const columns: Column<any>[] = [
     width: 200,
     dataKey: 'formatedTime',
     cellRenderer: ({ cellData: formatedTime, rowData: item }) => (
-      item.match || !searchText.value
+      <div
-        ? <div
         style="font-size: 14px;color: #303133;font-family: Arial, Helvetica, sans-serif;height: 100%;display: flex;align-items: center;"
         onClick={() => handleCheckChangeOther(item)}
       >
         {formatedTime}
       </div>
-        : <template></template>
     )
   },
   {
@@ -3651,8 +3647,7 @@ const columns: Column<any>[] = [
     title: '',
     width: 30,
     cellRenderer: ({ rowData: item }) => (
-      item.match || !searchText.value
+      <ElIcon
-        ? <ElIcon
         style="cursor: pointer;"
         color="red"
         // @ts-ignore
@@ -3660,7 +3655,6 @@ const columns: Column<any>[] = [
       >
         <DeleteFilled />
       </ElIcon>
-        : <template></template>
     )
   }
 ]

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