Merge branch 'dev' into release

2025-01-23 14:48:13 -05:00 · 2023-09-11 07:32:07 -07:00 · 2023-09-11 07:32:07 -07:00 · c24d6b9b0a
commit c24d6b9b0a
parent 6f36c11d05 f04991682f
23 changed files with 924 additions and 761 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,20 @@
+# :tada: 2.6.0 (2023-09-11)
+
+
+### :sparkles: Features
+
+* batch rename in gallery will not modify un-matched files ([079b034](https://github.com/Kuingsmile/PicList/commit/079b034))
+* optimize memory use and loading and searching speed of manage page for 30 fold ([fb070e7](https://github.com/Kuingsmile/PicList/commit/fb070e7))
+* optimize title text jump action of upload page ([dfb6f76](https://github.com/Kuingsmile/PicList/commit/dfb6f76))
+
+
+### :zap: Performance Improvements
+
+* fix memory leak of main page ([5392d9e](https://github.com/Kuingsmile/PicList/commit/5392d9e))
+* fix memory leak of uoload and setting page ([219cbbb](https://github.com/Kuingsmile/PicList/commit/219cbbb))
+
+
+
 ## :tada: 2.5.3 (2023-09-07)


--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "piclist",
-  "version": "2.5.3",
+  "version": "2.6.0",
  "author": {
    "name": "Kuingsmile",
    "email": "pkukuing@gmail.com"
@ -34,26 +34,26 @@
    "lint:dpdm": "dpdm -T --tsconfig ./tsconfig.json --no-tree --no-warning --exit-code circular:1 src/background.ts"
  },
  "dependencies": {
-    "@aws-sdk/client-s3": "^3.405.0",
-    "@aws-sdk/lib-storage": "^3.405.0",
-    "@aws-sdk/s3-request-presigner": "^3.405.0",
+    "@aws-sdk/client-s3": "^3.409.0",
+    "@aws-sdk/lib-storage": "^3.409.0",
+    "@aws-sdk/s3-request-presigner": "^3.409.0",
    "@element-plus/icons-vue": "^2.1.0",
    "@highlightjs/vue-plugin": "^2.1.0",
    "@nodelib/fs.walk": "^2.0.0",
    "@octokit/rest": "^19.0.7",
    "@picgo/i18n": "^1.0.0",
-    "@picgo/store": "^2.0.4",
-    "@smithy/node-http-handler": "^2.0.5",
+    "@picgo/store": "^2.1.0",
+    "@smithy/node-http-handler": "^2.1.2",
    "@types/mime-types": "^2.1.1",
    "@videojs-player/vue": "^1.0.0",
-    "ali-oss": "^6.18.0",
+    "ali-oss": "^6.18.1",
    "axios": "^1.5.0",
    "compare-versions": "^4.1.3",
-    "core-js": "^3.32.1",
+    "core-js": "^3.32.2",
    "cos-nodejs-sdk-v5": "^2.12.4",
    "dexie": "^3.2.4",
    "electron-updater": "^6.1.4",
-    "element-plus": "^2.3.9",
+    "element-plus": "2.3.12",
    "epipebomb": "^1.0.0",
    "fast-xml-parser": "^4.2.7",
    "form-data": "^4.0.0",
@ -68,7 +68,7 @@
    "mitt": "^3.0.1",
    "node-ssh-no-cpu-features": "^1.0.1",
    "nodejs-file-downloader": "^4.12.1",
-    "piclist": "^1.0.3",
+    "piclist": "^1.0.4",
    "pinia": "^2.1.6",
    "pinia-plugin-persistedstate": "^3.2.0",
    "qiniu": "^7.9.0",
@ -97,13 +97,13 @@
    "@types/lowdb": "^1.0.12",
    "@types/node": "^16.10.2",
    "@types/request-promise-native": "^1.0.18",
-    "@types/semver": "^7.5.0",
+    "@types/semver": "^7.5.1",
    "@types/tunnel": "^0.0.3",
    "@types/upyun": "^3.4.1",
    "@types/uuid": "^9.0.3",
    "@types/write-file-atomic": "^4.0.0",
-    "@typescript-eslint/eslint-plugin": "^6.5.0",
-    "@typescript-eslint/parser": "^6.5.0",
+    "@typescript-eslint/eslint-plugin": "^6.6.0",
+    "@typescript-eslint/parser": "^6.6.0",
    "@vue/cli-plugin-babel": "^5.0.8",
    "@vue/cli-plugin-eslint": "^5.0.8",
    "@vue/cli-plugin-router": "^5.0.8",
@ -112,13 +112,13 @@
    "@vue/eslint-config-standard": "^8.0.1",
    "@vue/eslint-config-typescript": "^11.0.3",
    "@vue/runtime-dom": "^3.3.4",
-    "conventional-changelog": "^5.0.0",
+    "conventional-changelog": "^5.1.0",
    "cz-customizable": "^7.0.0",
    "dotenv": "^16.3.1",
    "dpdm": "^3.13.1",
    "electron": "^22.0.2",
    "electron-devtools-installer": "^3.2.0",
-    "eslint": "^8.48.0",
+    "eslint": "^8.49.0",
    "eslint-config-standard": ">=16.0.0",
    "eslint-plugin-import": "^2.28.1",
    "eslint-plugin-node": "^11.1.0",
@ -126,7 +126,7 @@
    "eslint-plugin-vue": "^9.17.0",
    "husky": "^3.1.0",
    "node-loader": "^2.0.0",
-    "npm-check-updates": "^16.13.2",
+    "npm-check-updates": "^16.13.3",
    "stylus": "^0.59.0",
    "stylus-loader": "^7.1.3",
    "typescript": "^4.9.5",
--- a/public/i18n/en.yml
+++ b/public/i18n/en.yml
@ -249,7 +249,7 @@ SETTINGS_SYNC_CONFIG_SELECT_BOTH: Both configuration and gallery files
 SETTINGS_SYNC_CONFIG_GITHUB_USERNAME:  username
 SETTINGS_SYNC_CONFIG_GITEE_USERNAME:  username
 SETTINGS_SYNC_CONFIG_GITHUB_REPO:  repository (private)
-SETTINGS_SYNC_CONFIG_GITEE_REPO:  repository (private)
+SETTINGS_SYNC_CONFIG_GITEE_REPO:  repository path
 SETTINGS_SYNC_CONFIG_GITHUB_BRANCH:  branch
 SETTINGS_SYNC_CONFIG_GITEE_BRANCH:  branch
 SETTINGS_SYNC_CONFIG_GITHUB_TOKEN:  Token
@ -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
--- a/public/i18n/zh-CN.yml
+++ b/public/i18n/zh-CN.yml
@ -252,7 +252,7 @@ SETTINGS_SYNC_CONFIG_SELECT_BOTH: 配置文件和相册文件
 SETTINGS_SYNC_CONFIG_GITHUB_USERNAME: GitHub用户名
 SETTINGS_SYNC_CONFIG_GITEE_USERNAME: Gitee用户名
 SETTINGS_SYNC_CONFIG_GITHUB_REPO: 仓库(私有)
-SETTINGS_SYNC_CONFIG_GITEE_REPO: 仓库(私有)
+SETTINGS_SYNC_CONFIG_GITEE_REPO: 仓库路径名
 SETTINGS_SYNC_CONFIG_GITHUB_BRANCH: GitHub分支
 SETTINGS_SYNC_CONFIG_GITEE_BRANCH: Gitee分支
 SETTINGS_SYNC_CONFIG_GITHUB_TOKEN: GitHub Token
@ -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: 取消
--- a/public/i18n/zh-TW.yml
+++ b/public/i18n/zh-TW.yml
@ -250,7 +250,7 @@ SETTINGS_SYNC_CONFIG_SELECT_BOTH: 配置檔案和相簿檔案
 SETTINGS_SYNC_CONFIG_GITHUB_USERNAME: 用戶名
 SETTINGS_SYNC_CONFIG_GITEE_USERNAME: 用戶名
 SETTINGS_SYNC_CONFIG_GITHUB_REPO: 儲存庫（私有）
-SETTINGS_SYNC_CONFIG_GITEE_REPO: 儲存庫（私有）
+SETTINGS_SYNC_CONFIG_GITEE_REPO: 儲存庫路径
 SETTINGS_SYNC_CONFIG_GITHUB_BRANCH: GitHub 分支
 SETTINGS_SYNC_CONFIG_GITEE_BRANCH: Gitee 分支
 SETTINGS_SYNC_CONFIG_GITHUB_TOKEN: GitHub Token
@ -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: 取消
--- a/src/main/lifeCycle/index.ts
+++ b/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
--- a/src/renderer/components/ConfigForm.vue
+++ b/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"
--- a/src/renderer/components/ConfigFormForPlugin.vue
+++ b/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"
--- a/src/renderer/components/InputBoxDialog.vue
+++ b/src/renderer/components/InputBoxDialog.vue
@ -3,6 +3,7 @@
    v-model="showInputBoxVisible"
    :title="inputBoxOptions.title || $T('INPUT')"
    :modal-append-to-body="false"
+    append-to-body
  >
    <el-input
      v-model="inputBoxValue"
--- a/src/renderer/components/settings/CheckboxFormItem.vue
+++ b/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 />
--- a/src/renderer/layouts/Main.vue
+++ b/src/renderer/layouts/Main.vue
@ -165,6 +165,7 @@
      :title="$T('SPONSOR_PICLIST')"
      width="70%"
      top="10vh"
+      append-to-body
    >
      {{ $T('PICLIST_SPONSOR_TEXT') }}
      <el-row class="support">
@ -198,6 +199,7 @@
      :title="$T('PICBED_QRCODE')"
      :modal-append-to-body="false"
      lock-scroll
+      append-to-body
    >
      <el-form
        label-position="left"
@ -211,6 +213,8 @@
            v-model="choosedPicBedForQRCode"
            multiple
            collapse-tags
+            :persistent="false"
+            teleported
          >
            <el-option
              v-for="item in picBed"
--- a/src/renderer/manage/pages/bucketPage.vue
+++ b/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' || ''
-      if (['name', 'time', 'size', 'ext'].includes(sortType as string)) {
+      const sortType = localStorage.getItem('sortType') as sortTypeList || 'init'
      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' || ''
-      if (['name', 'time', 'size', 'ext'].includes(sortType as string)) {
+      const sortType = localStorage.getItem('sortType') as sortTypeList || 'init'
      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 itemsToCheck = isSearchEmpty ? currentPageFilesInfo : currentPageFilesInfo.filter((item: any) => item.match)
-  const allSelected = selectedItems.length === itemsToCheck.length
-  selectedItems.length = 0
-  currentPageFilesInfo.forEach((item: any) => {
-    item.checked = !allSelected && (isSearchEmpty || item.match)
-    if (item.checked) selectedItems.push(item)
+  const allSelected = selectedItems.value.length === filterList.value.length
+  filterList.value.forEach((item: any) => {
+    item.checked = !allSelected
  })
 }

@ -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) => {
-      return b.isDir - a.isDir || a.fileName.localeCompare(b.fileName)
-    })
-    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)) {
+    currentPageFilesInfo.splice(0, currentPageFilesInfo.length, ...currentFileList)
+    const sortType = localStorage.getItem('sortType') as sortTypeList || 'init'
    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 }) => (
-      item.match || !searchText.value
-        ? <span></span>
-        : <template></template>
+    cellRenderer: () => (
+      <span></span>
    )
  },
  {
@ -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>
    )
  }
 ]
--- a/src/renderer/manage/pages/logIn.vue
+++ b/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"
-              inactive-color="#ff4949"
+              style="--el-switch-on-color: #13ce66;--el-switch-off-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 () => {
-  await getCurrentConfigList()
-  getAllConfigAliasArray()
+onMounted(() => {
+  getCurrentConfigList()
 })

 </script>
--- a/src/renderer/manage/pages/manageMain.vue
+++ b/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)"
--- a/src/renderer/manage/pages/manageSetting.vue
+++ b/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;"
-                active-color="#13ce66"
-                inactive-color="#ff4949"
+                style="position:absolute;right: 0;--el-switch-on-color: #13ce66;--el-switch-off-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;"
-                active-color="#13ce66"
-                inactive-color="#ff4949"
+                style="position:absolute;right: 0;--el-switch-on-color: #13ce66;--el-switch-off-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;"
-                active-color="#13ce66"
-                inactive-color="#ff4949"
+                style="position:absolute;right: 0;--el-switch-on-color: #13ce66;--el-switch-off-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;"
-                active-color="#13ce66"
-                inactive-color="#ff4949"
+                style="position:absolute;right: 0;--el-switch-on-color: #13ce66;--el-switch-off-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;"
-                active-color="#13ce66"
-                inactive-color="#ff4949"
+                style="position:absolute;right: 0;--el-switch-on-color: #13ce66;--el-switch-off-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;"
-                active-color="#13ce66"
-                inactive-color="#ff4949"
+                style="position:absolute;right: 0;--el-switch-on-color: #13ce66;--el-switch-off-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;"
-                active-color="#13ce66"
-                inactive-color="#ff4949"
+                style="position:absolute;right: 0;--el-switch-on-color: #13ce66;--el-switch-off-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;"
-                active-color="#13ce66"
-                inactive-color="#ff4949"
+                style="position:absolute;right: 0;--el-switch-on-color: #13ce66;--el-switch-off-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;"
-                active-color="#13ce66"
-                inactive-color="#ff4949"
+                style="position:absolute;right: 0;--el-switch-on-color: #13ce66;--el-switch-off-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;"
-                active-color="#13ce66"
-                inactive-color="#ff4949"
+                style="position:absolute;right: 0;--el-switch-on-color: #13ce66;--el-switch-off-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;"
-                active-color="#13ce66"
-                inactive-color="#ff4949"
+                style="position:absolute;right: 0;--el-switch-on-color: #13ce66;--el-switch-off-color: #ff4949;"
                @change="handleCustomRenameChange"
              />
            </el-form-item>
--- a/src/renderer/pages/Gallery.vue
+++ b/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"
@ -294,6 +303,7 @@
      :title="$T('CHANGE_IMAGE_URL')"
      width="500px"
      :modal-append-to-body="false"
+      append-to-body
    >
      <el-input v-model="imgInfo.imgUrl" />
      <template #footer>
@ -315,6 +325,7 @@
      align-center
      draggable
      destroy-on-close
+      append-to-body
    >
      <el-link
        :underline="false"
@ -326,6 +337,8 @@
            effect="dark"
            :content="$T('MANAGE_BUCKET_RENAME_FILE_INPUT_A_TIPS')"
            placement="right"
+            :persistent="false"
+            teleported
          >
            <el-icon
              color="#409EFF"
@ -350,6 +363,8 @@
            effect="light"
            placement="right"
            width="280"
+            :persistent="false"
+            teleported
          >
            <template #reference>
              <el-icon
@ -502,11 +517,8 @@ const isShowBatchRenameDialog = ref(false)
 const batchRenameMatch = ref('')
 const batchRenameReplace = ref('')
 const mathcedCount = computed(() => {
-  const matchedFiles = [] as any[]
-  images.value.forEach((item: any) => {
-    if (customStrMatch(item.imgUrl, batchRenameMatch.value)) {
-      matchedFiles.push(item)
-    }
+  const matchedFiles = filterList.value.filter((item: any) => {
+    return customStrMatch(item.imgUrl, batchRenameMatch.value)
  })
  return matchedFiles.length
 })
@ -939,7 +951,7 @@ function handleBatchRename () {
    return
  }
  let matchedFiles = [] as any[]
-  images.value.forEach((item: any) => {
+  filterList.value.forEach((item: any) => {
    if (customStrMatch(item.imgUrl, batchRenameMatch.value)) {
      matchedFiles.push(item)
    }
--- a/src/renderer/pages/PicGoSetting.vue
+++ b/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 />
@ -641,6 +652,7 @@
      :title="$T('SETTINGS_CUSTOM_LINK_FORMAT')"
      :modal-append-to-body="false"
      center
+      append-to-body
    >
      <el-form
        ref="$customLink"
@ -691,6 +703,7 @@
      :modal-append-to-body="false"
      width="70%"
      center
+      append-to-body
    >
      <el-form
        label-position="right"
@ -747,6 +760,7 @@
      :modal-append-to-body="false"
      width="70%"
      center
+      append-to-body
    >
      <el-form
        label-position="right"
@ -802,6 +816,7 @@
      :title="$T('SETTINGS_CHECK_UPDATE')"
      :modal-append-to-body="false"
      center
+      append-to-body
    >
      <div>
        {{ $T('SETTINGS_CURRENT_VERSION') }}: {{ version }}
@ -835,6 +850,7 @@
      align-center
      draggable
      destroy-on-close
+      append-to-body
    >
      <el-link
        :underline="false"
@ -859,6 +875,8 @@
            effect="light"
            placement="right"
            width="350"
+            :persistent="false"
+            teleported
          >
            <template #reference>
              <el-icon
@ -927,6 +945,7 @@
      :modal-append-to-body="false"
      width="500px"
      center
+      append-to-body
    >
      <el-form
        label-position="right"
@ -952,6 +971,8 @@
            multiple
            collapse-tags
            style="width: 100%;"
+            :persistent="false"
+            teleported
          >
            <el-option
              v-for="(value, key) of logLevel"
@ -997,6 +1018,7 @@
      :title="$T('SETTINGS_SET_PICGO_SERVER')"
      :modal-append-to-body="false"
      center
+      append-to-body
    >
      <div class="notice-text">
        {{ $T('SETTINGS_TIPS_SERVER_NOTICE') }}
@ -1058,6 +1080,7 @@
      :title="$T('SETTINGS_SYNC_CONFIG_TITLE')"
      :modal-append-to-body="false"
      center
+      append-to-body
    >
      <div class="notice-text">
        {{ $T('SETTINGS_SYNC_CONFIG_NOTE') }}
@ -1072,6 +1095,8 @@
          <el-select
            v-model="sync.type"
            style="width: 100%;"
+            :persistent="false"
+            teleported
          >
            <el-option
              v-for="typeitem of syncType"
@ -1151,6 +1176,7 @@
      :title="$T('SETTINGS_UP_DOWN_DESC')"
      :modal-append-to-body="false"
      center
+      append-to-body
    >
      <el-form
        label-position="right"
@ -1225,6 +1251,7 @@
      draggable
      center
      align-center
+      append-to-body
    >
      <el-form
        label-position="top"
@ -1238,8 +1265,7 @@
        >
          <el-switch
            v-model="waterMarkForm.isAddWatermark"
-            active-color="#13ce66"
-            inactive-color="#ff4949"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
          />
        </el-form-item>
        <el-form-item
@ -1248,7 +1274,7 @@
        >
          <el-radio-group v-model="waterMarkForm.watermarkType">
            <el-radio label="text">
-              {{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_TEXT') }}}
+              {{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_TEXT') }}
            </el-radio>
            <el-radio label="image">
              {{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_IMAGE') }}
@ -1261,8 +1287,7 @@
        >
          <el-switch
            v-model="waterMarkForm.isFullScreenWatermark"
-            active-color="#13ce66"
-            inactive-color="#ff4949"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
          />
        </el-form-item>
        <el-form-item
@ -1333,8 +1358,7 @@
        >
          <el-switch
            v-model="compressForm.isRemoveExif"
-            active-color="#13ce66"
-            inactive-color="#ff4949"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
          />
        </el-form-item>
        <el-form-item
@ -1352,15 +1376,18 @@
        >
          <el-switch
            v-model="compressForm.isConvert"
-            active-color="#13ce66"
-            inactive-color="#ff4949"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-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"
@ -1374,8 +1401,7 @@
        >
          <el-switch
            v-model="compressForm.isFlip"
-            active-color="#13ce66"
-            inactive-color="#ff4949"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
          />
        </el-form-item>
        <el-form-item
@ -1383,8 +1409,7 @@
        >
          <el-switch
            v-model="compressForm.isFlop"
-            active-color="#13ce66"
-            inactive-color="#ff4949"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
          />
        </el-form-item>
        <el-form-item
@ -1392,8 +1417,7 @@
        >
          <el-switch
            v-model="compressForm.isReSize"
-            active-color="#13ce66"
-            inactive-color="#ff4949"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
          />
        </el-form-item>
        <el-form-item
@ -1420,8 +1444,7 @@
        >
          <el-switch
            v-model="compressForm.skipReSizeOfSmallImg"
-            active-color="#13ce66"
-            inactive-color="#ff4949"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
          />
        </el-form-item>
        <el-form-item
@ -1430,8 +1453,7 @@
        >
          <el-switch
            v-model="compressForm.skipReSizeOfSmallImg"
-            active-color="#13ce66"
-            inactive-color="#ff4949"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
          />
        </el-form-item>
        <el-form-item
@ -1439,8 +1461,7 @@
        >
          <el-switch
            v-model="compressForm.isReSizeByPercent"
-            active-color="#13ce66"
-            inactive-color="#ff4949"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
          />
        </el-form-item>
        <el-form-item
@ -1457,8 +1478,7 @@
        >
          <el-switch
            v-model="compressForm.isRotate"
-            active-color="#13ce66"
-            inactive-color="#ff4949"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
          />
        </el-form-item>
        <el-form-item
--- a/src/renderer/pages/Plugin.vue
+++ b/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 />
@ -194,6 +200,7 @@
        c: configName
      })"
      width="70%"
+      append-to-body
    >
      <config-form
        :id="configName"
--- a/src/renderer/pages/ShortKey.vue
+++ b/src/renderer/pages/ShortKey.vue
@ -81,6 +81,7 @@
      v-model="keyBindingVisible"
      :title="$T('SHORTCUT_CHANGE_UPLOAD')"
      :modal-append-to-body="false"
+      append-to-body
    >
      <el-form
        label-position="top"
--- a/src/renderer/pages/Upload.vue
+++ b/src/renderer/pages/Upload.vue
@ -12,12 +12,14 @@
            placement="top"
            effect="light"
            :content="$T('UPLOAD_VIEW_HINT')"
+            :persistent="false"
+            teleported
          >
            <span
              id="upload-view-title"
              @click="handlePicBedNameClick(picBedName, picBedConfigName)"
            >
-              {{ picBedName }} - {{ picBedConfigName }}
+              {{ picBedName }} - {{ picBedConfigName || 'Default' }}
            </span>
          </el-tooltip>
          <el-icon
@ -156,6 +158,7 @@
      draggable
      center
      align-center
+      append-to-body
    >
      <el-form
        label-position="top"
@ -169,8 +172,7 @@
        >
          <el-switch
            v-model="waterMarkForm.isAddWatermark"
-            active-color="#13ce66"
-            inactive-color="#ff4949"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
          />
        </el-form-item>
        <el-form-item
@ -192,8 +194,7 @@
        >
          <el-switch
            v-model="waterMarkForm.isFullScreenWatermark"
-            active-color="#13ce66"
-            inactive-color="#ff4949"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
          />
        </el-form-item>
        <el-form-item
@ -264,8 +265,7 @@
        >
          <el-switch
            v-model="compressForm.isRemoveExif"
-            active-color="#13ce66"
-            inactive-color="#ff4949"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
          />
        </el-form-item>
        <el-form-item
@ -283,15 +283,18 @@
        >
          <el-switch
            v-model="compressForm.isConvert"
-            active-color="#13ce66"
-            inactive-color="#ff4949"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-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"
@ -305,8 +308,7 @@
        >
          <el-switch
            v-model="compressForm.isFlip"
-            active-color="#13ce66"
-            inactive-color="#ff4949"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
          />
        </el-form-item>
        <el-form-item
@ -314,8 +316,7 @@
        >
          <el-switch
            v-model="compressForm.isFlop"
-            active-color="#13ce66"
-            inactive-color="#ff4949"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
          />
        </el-form-item>
        <el-form-item
@ -323,8 +324,7 @@
        >
          <el-switch
            v-model="compressForm.isReSize"
-            active-color="#13ce66"
-            inactive-color="#ff4949"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
          />
        </el-form-item>
        <el-form-item
@ -351,8 +351,7 @@
        >
          <el-switch
            v-model="compressForm.skipReSizeOfSmallImg"
-            active-color="#13ce66"
-            inactive-color="#ff4949"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
          />
        </el-form-item>
        <el-form-item
@ -361,8 +360,7 @@
        >
          <el-switch
            v-model="compressForm.skipReSizeOfSmallImg"
-            active-color="#13ce66"
-            inactive-color="#ff4949"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
          />
        </el-form-item>
        <el-form-item
@ -370,8 +368,7 @@
        >
          <el-switch
            v-model="compressForm.isReSizeByPercent"
-            active-color="#13ce66"
-            inactive-color="#ff4949"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
          />
        </el-form-item>
        <el-form-item
@ -388,8 +385,7 @@
        >
          <el-switch
            v-model="compressForm.isRotate"
-            active-color="#13ce66"
-            inactive-color="#ff4949"
+            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
          />
        </el-form-item>
        <el-form-item
@ -449,7 +445,7 @@ import {
 import { ElMessage as $message } from 'element-plus'

 // 数据发送工具函数
-import { getConfig, saveConfig, sendToMain } from '@/utils/dataSender'
+import { getConfig, saveConfig, sendToMain, triggerRPC } from '@/utils/dataSender'

 // 类型声明
 import { IBuildInCompressOptions, IBuildInWaterMarkOptions } from 'piclist'
@ -459,6 +455,7 @@ import { useRouter } from 'vue-router'

 // 路由配置常量
 import { PICBEDS_PAGE } from '@/router/config'
+import { IRPCActionType } from '~/universal/types/enum'

 const $router = useRouter()

@ -602,16 +599,18 @@ function onProgressChange (val: number) {
  }
 }

-async function handlePicBedNameClick (picBedName: string, picBedConfigName: string) {
+async function handlePicBedNameClick (_picBedName: string, picBedConfigName: string | undefined) {
+  const formatedpicBedConfigName = picBedConfigName || 'Default'
  const currentPicBed = await getConfig<string>('picBed.current')
  const currentPicBedConfig = await getConfig<any[]>(`uploader.${currentPicBed}`) as any || {}
-  const configList = currentPicBedConfig.configList || []
-  const config = configList.find((item: any) => item._configName === picBedConfigName)
+  const configList = await triggerRPC<IUploaderConfigItem>(IRPCActionType.GET_PICBED_CONFIG_LIST, currentPicBed)
+  const currentConfigList = configList?.configList ?? []
+  const config = currentConfigList.find((item: any) => item._configName === formatedpicBedConfigName)
  $router.push({
    name: PICBEDS_PAGE,
    params: {
      type: currentPicBed,
-      configId: config._id
+      configId: config?._id || ''
    },
    query: {
      defaultConfigId: currentPicBedConfig.defaultId || ''
--- a/src/renderer/pages/picbeds/index.vue
+++ b/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>
--- a/src/universal/types/i18n.d.ts
+++ b/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
--- a/yarn.lock
+++ b/yarn.lock