🚧 WIP(custom): v3.0.0 migrate to vite and esm

src/renderer/manage/components/DynamicSwitch.vue

@@ -2,10 +2,21 @@
   <el-form-item>
     <template #label>
       <span style="position: absolute; left: 0">
-        <span v-for="(segment, index) in segments" :key="index" :style="segment.style">
+        <span
+          v-for="(segment, index) in segments"
+          :key="index"
+          :style="segment.style"
+        >
           {{ segment.text }}
         </span>
-        <el-tooltip v-if="tooltip" :content="tooltip" effect="dark" placement="right" :persistent="false" teleported>
+        <el-tooltip
+          v-if="tooltip"
+          :content="tooltip"
+          effect="dark"
+          placement="right"
+          :persistent="false"
+          teleported
+        >
           <el-icon>
             <InfoFilled />
           </el-icon>

src/renderer/manage/pages/LogInPage.vue

@@ -16,9 +16,27 @@
         lazy
       >
         <el-row>
-          <el-col v-for="item in sortedAllConfigAliasMap" :key="item" :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
-            <el-card class="box-card" style="margin: 10px 0" shadow="hover">
-              <el-popover placement="top" :width="300" trigger="click" :persistent="false" teleported>
+          <el-col
+            v-for="item in sortedAllConfigAliasMap"
+            :key="item"
+            :xs="24"
+            :sm="12"
+            :md="8"
+            :lg="6"
+            :xl="4"
+          >
+            <el-card
+              class="box-card"
+              style="margin: 10px 0"
+              shadow="hover"
+            >
+              <el-popover
+                placement="top"
+                :width="300"
+                trigger="click"
+                :persistent="false"
+                teleported
+              >
                 <el-table
                   :data="formObjToTableData(item.config)"
                   style="width: 100%"
@@ -26,8 +44,15 @@
                   :header-cell-style="{ 'text-align': 'center' }"
                   :cell-style="{ 'text-align': 'center' }"
                 >
-                  <el-table-column prop="key" :label="$T('MANAGE_LOGIN_PAGE_PANE_KEY_NAME')" width="100" />
-                  <el-table-column prop="value" :label="$T('MANAGE_LOGIN_PAGE_PANE_KEY_VALUE')" />
+                  <el-table-column
+                    prop="key"
+                    :label="$T('MANAGE_LOGIN_PAGE_PANE_KEY_NAME')"
+                    width="100"
+                  />
+                  <el-table-column
+                    prop="value"
+                    :label="$T('MANAGE_LOGIN_PAGE_PANE_KEY_VALUE')"
+                  />
                 </el-table>
                 <template #reference>
                   <el-button
@@ -40,7 +65,10 @@
                     "
                   >
                     <template #icon>
-                      <img :src="require(`./assets/${item.picBedName}.webp`)" style="width: 25px; height: 25px" />
+                      <img
+                        :src="`/assets/${item.picBedName}.webp`"
+                        style="width: 25px; height: 25px"
+                      >
                     </template>
                     <el-tooltip
                       effect="light"
@@ -55,13 +83,23 @@
                   </el-button>
                 </template>
               </el-popover>
-              <br />
-              <br />
+              <br>
+              <br>
               <el-button-group>
-                <el-button type="primary" :icon="Pointer" plain @click="handleConfigClick(item)">
+                <el-button
+                  type="primary"
+                  :icon="Pointer"
+                  plain
+                  @click="handleConfigClick(item)"
+                >
                   {{ $T('MANAGE_LOGIN_PAGE_PANE_ENTER') }}
                 </el-button>
-                <el-button type="warning" :icon="Delete" plain @click="handleConfigRemove(item.alias)">
+                <el-button
+                  type="warning"
+                  :icon="Delete"
+                  plain
+                  @click="handleConfigRemove(item.alias)"
+                >
                   {{ $T('MANAGE_LOGIN_PAGE_PANE_DELETE') }}
                 </el-button>
               </el-button-group>
@@ -78,11 +116,23 @@
         lazy
         style="width: 100%; overflow-y: scroll; height: calc(100vh - 50px)"
       >
-        <el-alert :title="item.explain" type="info" show-icon center :closable="false" />
-        <el-alert center :closable="false">
+        <el-alert
+          :title="item.explain"
+          type="info"
+          show-icon
+          center
+          :closable="false"
+        />
+        <el-alert
+          center
+          :closable="false"
+        >
           <div>
             {{ item.referenceText }}
-            <a style="color: blue; cursor: pointer" @click="handleReferenceClick(item.refLink)">{{ item.refLink }}</a>
+            <a
+              style="color: blue; cursor: pointer"
+              @click="handleReferenceClick(item.refLink)"
+            >{{ item.refLink }}</a>
           </div>
         </el-alert>
         <el-form
@@ -156,20 +206,41 @@
           >
             {{ $T('MANAGE_LOGIN_PAGE_PANE_IMPORT') }}
             <template #dropdown>
-              <el-dropdown-item v-for="i in currentAliasList" :key="i" @click="handleConfigImport(i)">
+              <el-dropdown-item
+                v-for="i in currentAliasList"
+                :key="i"
+                @click="handleConfigImport(i)"
+              >
                 {{ i }}
               </el-dropdown-item>
             </template>
           </el-dropdown>
-          <el-button type="primary" style="margin-left: 10vw" :icon="Edit" plain @click="handleConfigChange(item.icon)">
+          <el-button
+            type="primary"
+            style="margin-left: 10vw"
+            :icon="Edit"
+            plain
+            @click="handleConfigChange(item.icon)"
+          >
             {{ $T('MANAGE_LOGIN_PAGE_PANE_SAVE') }}
           </el-button>
-          <el-button type="danger" style="margin-left: 10vw" :icon="Delete" plain @click="handleConfigReset(item.icon)">
+          <el-button
+            type="danger"
+            style="margin-left: 10vw"
+            :icon="Delete"
+            plain
+            @click="handleConfigReset(item.icon)"
+          >
             {{ $T('MANAGE_LOGIN_PAGE_PANE_RESET') }}
           </el-button>
         </div>
-        <br />
-        <el-alert :title="$T('MANAGE_LOGIN_PAGE_PANE_TABLE_TITLE')" type="success" center :closable="false" />
+        <br>
+        <el-alert
+          :title="$T('MANAGE_LOGIN_PAGE_PANE_TABLE_TITLE')"
+          type="success"
+          center
+          :closable="false"
+        />
         <el-table
           :data="dataForTable"
           style="width: 100%; margin-top: 10px"
@@ -192,20 +263,19 @@
 </template>
 
 <script lang="ts" setup>
-import { shell } from 'electron'
+import { Delete, Edit, InfoFilled, Pointer } from '@element-plus/icons-vue'
 import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
-import { Delete, Edit, Pointer, InfoFilled } from '@element-plus/icons-vue'
-import { reactive, ref, onMounted, computed } from 'vue'
+import { computed, onMounted, reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
-import { useManageStore } from '@/manage/store/manageStore'
-import { supportedPicBedList } from '@/manage/utils/constants'
-import { getConfig, saveConfig, removeConfig } from '@/manage/utils/dataSender'
-import { formObjToTableData } from '@/manage/utils/common'
-
-import { getConfig as getPicBedsConfig } from '@/utils/dataSender'
 import { T as $T } from '@/i18n'
-
+import { useManageStore } from '@/manage/store/manageStore'
+import { formObjToTableData } from '@/manage/utils/common'
+import { supportedPicBedList } from '@/manage/utils/constants'
+import { getConfig, removeConfig, saveConfig } from '@/manage/utils/dataSender'
+import { getConfig as getPicBedsConfig } from '@/utils/dataSender'
+import { IRPCActionType } from '#/types/enum'
+import { IStringKeyMap, IUploaderConfigListItem } from '#/types/types'
 import { formatEndpoint, isNeedToShorten, safeSliceF } from '#/utils/common'
 
 const manageStore = useManageStore()
@@ -228,7 +298,7 @@ const sortedAllConfigAliasMap = computed(() => {
 
 const importedNewConfig: IStringKeyMap = {}
 
-function ruleMap(options: IStringKeyMap) {
+function ruleMap (options: IStringKeyMap) {
   const rule: any = {}
   Object.keys(options).forEach(key => {
     const item = options[key].options
@@ -246,13 +316,13 @@ function ruleMap(options: IStringKeyMap) {
   return rule
 }
 
-function getDataForTable() {
+function getDataForTable () {
   for (const key in existingConfiguration) {
     dataForTable.push({ ...(existingConfiguration[key] as IStringKeyMap) })
   }
 }
 
-async function getExistingConfig(name: string) {
+async function getExistingConfig (name: string) {
   if (name === 'login') {
     getAllConfigAliasArray()
     return
@@ -278,11 +348,11 @@ async function getExistingConfig(name: string) {
   handleConfigImport(currentAliasList[0])
 }
 
-function getAliasList() {
+function getAliasList () {
   return Object.values(existingConfiguration).map(item => item.alias)
 }
 
-async function handleConfigChange(name: string) {
+async function handleConfigChange (name: string) {
   const aliasList = getAliasList()
   const allKeys = Object.keys(supportedPicBedList[name].configOptions)
   const resultMap: IStringKeyMap = {}
@@ -456,7 +526,7 @@ const handleCellClick = (row: any, column: any) => {
   ElMessage.success(`${$T('MANAGE_LOGIN_PAGE_PANE_CONFIG_CHANGE_COPY_SUCCESS')}${row[column.property]}`)
 }
 
-const handleReferenceClick = (url: string) => shell.openExternal(url)
+const handleReferenceClick = (url: string) => window.electron.sendRPC(IRPCActionType.OPEN_URL, url)
 
 const handleConfigClick = async (item: any) => {
   const alias = item.alias
@@ -474,7 +544,7 @@ const handleConfigClick = async (item: any) => {
   })
 }
 
-function handleConfigImport(alias: string) {
+function handleConfigImport (alias: string) {
   const selectedConfig = existingConfiguration[alias]
   if (!selectedConfig) return
 
@@ -485,7 +555,7 @@ function handleConfigImport(alias: string) {
   })
 }
 
-async function getCurrentConfigList() {
+async function getCurrentConfigList () {
   await manageStore.refreshConfig()
   const configList = (await getPicBedsConfig<any>('uploader')) ?? {}
   const pbList = [
@@ -526,18 +596,18 @@ async function getCurrentConfigList() {
   await getAllConfigAliasArray()
 }
 
-function isImported(alias: string) {
+function isImported (alias: string) {
   return Object.values(allConfigAliasMap).some(item => item.alias === alias)
 }
 
-function initArray(arrayT: string | string[], defaultValue: string[]) {
+function initArray (arrayT: string | string[], defaultValue: string[]) {
   if (!Array.isArray(arrayT)) {
     arrayT = arrayT ? [arrayT] : defaultValue
   }
   return arrayT
 }
 
-async function transUpToManage(config: IUploaderConfigListItem, picBedName: string, autoImportPicBed: string[]) {
+async function transUpToManage (config: IUploaderConfigListItem, picBedName: string, autoImportPicBed: string[]) {
   const alias = `${
     picBedName === 'webdavplist'
       ? 'webdav'

src/renderer/manage/pages/ManageMain.vue

@@ -2,15 +2,22 @@
   <div class="layout">
     <div class="layout__menu">
       <div class="layout__menu__button">
-        <span class="layout__menu__button__item" @click="openPicBedUrl">
+        <span
+          class="layout__menu__button__item"
+          @click="openPicBedUrl"
+        >
           <img
-            :src="require(`./assets/${currentPagePicBedConfig.picBedName}.webp`)"
+            :src="`/assets/${currentPagePicBedConfig.picBedName}.webp`"
             class="layout__menu__button__item__icon"
-          />
+          >
           {{ supportedPicBedList[currentPagePicBedConfig.picBedName].name }}
         </span>
       </div>
-      <el-divider content-position="left" class="layout__menu__button__divider" border-style="none">
+      <el-divider
+        content-position="left"
+        class="layout__menu__button__divider"
+        border-style="none"
+      >
         <span style="font-size: 14px; color: #909399">
           {{ menuTitleMap[currentPicBedName] }}
           <el-tooltip
@@ -42,7 +49,11 @@
         active-text-color="#409EFF"
         @select="handleSelectMenu"
       >
-        <el-menu-item v-for="item of bucketNameList" :key="item" :index="item">
+        <el-menu-item
+          v-for="item of bucketNameList"
+          :key="item"
+          :index="item"
+        >
           <span
             class="layout__menu__list__item"
             :style="{
@@ -77,8 +88,15 @@
           </span>
         </el-menu-item>
       </el-menu>
-      <el-menu class="layout__menu__setting" style="width: 120px">
-        <el-menu-item index="changePicBed" style="height: 40px" @click="switchPicBed('main')">
+      <el-menu
+        class="layout__menu__setting"
+        style="width: 120px"
+      >
+        <el-menu-item
+          index="changePicBed"
+          style="height: 40px"
+          @click="switchPicBed('main')"
+        >
           <span class="layout__menu__setting__item">
             <el-icon class="layout__menu__setting__item__icon">
               <HomeFilled />
@@ -86,7 +104,11 @@
             {{ $T('MANAGE_MAIN_PAGE_BACK_TO_HOME') }}
           </span>
         </el-menu-item>
-        <el-menu-item index="changePicBed" style="height: 40px" @click="changePicBed">
+        <el-menu-item
+          index="changePicBed"
+          style="height: 40px"
+          @click="changePicBed"
+        >
           <span class="layout__menu__setting__item">
             <el-icon class="layout__menu__setting__item__icon">
               <Switch />
@@ -94,7 +116,11 @@
             {{ $T('MANAGE_MAIN_PAGE_SWITCH_PICBED') }}
           </span>
         </el-menu-item>
-        <el-menu-item index="bucketPageSetting" style="height: 40px" @click="openBucketPageSetting">
+        <el-menu-item
+          index="bucketPageSetting"
+          style="height: 40px"
+          @click="openBucketPageSetting"
+        >
           <span class="layout__menu__setting__item">
             <el-icon class="layout__menu__setting__item__icon">
               <Tools />
@@ -104,17 +130,31 @@
         </el-menu-item>
       </el-menu>
     </div>
-    <div class="layout__content" style="height: 100%; background-color: transparent; flex: 1; width: 0">
+    <div
+      class="layout__content"
+      style="height: 100%; background-color: transparent; flex: 1; width: 0"
+    >
       <router-view />
     </div>
-    <el-dialog v-model="picBedSwitchDialogVisible" top="30vh" append-to-body>
+    <el-dialog
+      v-model="picBedSwitchDialogVisible"
+      top="30vh"
+      append-to-body
+    >
       <div
         class="choice-cos"
         style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around"
       >
         <el-card shadow="hover">
-          <div style="text-align: center; display: flex; flex-direction: column" @click="switchPicBed('main')">
-            <el-icon color="red" size="25px" style="margin: 0 auto">
+          <div
+            style="text-align: center; display: flex; flex-direction: column"
+            @click="switchPicBed('main')"
+          >
+            <el-icon
+              color="red"
+              size="25px"
+              style="margin: 0 auto"
+            >
               <ChromeFilled />
             </el-icon>
             <span style="font-size: 13px; margin-top: 5px; color: red">
@@ -122,10 +162,17 @@
             </span>
           </div>
         </el-card>
-        <el-card v-for="item in allPicBedConfigure" :key="item" shadow="hover">
-          <div style="text-align: center; display: flex; flex-direction: column" @click="switchPicBed(item.alias)">
+        <el-card
+          v-for="item in allPicBedConfigure"
+          :key="item"
+          shadow="hover"
+        >
+          <div
+            style="text-align: center; display: flex; flex-direction: column"
+            @click="switchPicBed(item.alias)"
+          >
             <el-image
-              :src="require(`./assets/${item.picBedName}.webp`)"
+              :src="`/assets/${item.picBedName}.webp`"
               class="layout__addNewBucket__icon"
               style="width: 25px; height: 25px; margin: 0 auto"
             />
@@ -136,7 +183,11 @@
         </el-card>
       </div>
     </el-dialog>
-    <el-drawer v-model="nweBucketDrawerVisible" class="layout__addNewBucket" append-to-body>
+    <el-drawer
+      v-model="nweBucketDrawerVisible"
+      class="layout__addNewBucket"
+      append-to-body
+    >
       <el-form
         label-position="top"
         require-asterisk-position="right"
@@ -147,7 +198,7 @@
       >
         <div style="position: relative; height: 10vh; width: 100%">
           <el-image
-            :src="require(`./assets/${currentPicBedName}.webp`)"
+            :src="`/assets/${currentPicBedName}.webp`"
             class="layout__addNewBucket__icon"
             style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)"
           />
@@ -162,7 +213,7 @@
           <el-input
             v-if="
               newBucketConfig[currentPicBedName].configOptions[option].component === 'input' &&
-              currentPicBedName !== 'tcyun'
+                currentPicBedName !== 'tcyun'
             "
             v-model.trim="newBucketConfigResult[currentPicBedName + '.' + option]"
             :placeholder="newBucketConfig[currentPicBedName].configOptions[option].placeholder"
@@ -170,7 +221,7 @@
           <el-input
             v-if="
               currentPicBedName === 'tcyun' &&
-              newBucketConfig[currentPicBedName].configOptions[option].component === 'input'
+                newBucketConfig[currentPicBedName].configOptions[option].component === 'input'
             "
             v-model.trim="newBucketConfigResult[currentPicBedName + '.' + option]"
             :placeholder="newBucketConfig[currentPicBedName].configOptions[option].placeholder"
@@ -216,29 +267,27 @@
 </template>
 
 <script lang="ts" setup>
-import { shell } from 'electron'
-import { ElNotification } from 'element-plus'
-import {
-  CirclePlus,
-  SuccessFilled,
-  Folder,
-  Switch,
-  Tools,
-  ChromeFilled,
-  HomeFilled,
-  FolderOpened
-} from '@element-plus/icons-vue'
-import path from 'path'
-import { ref, reactive, computed, onBeforeMount, watch } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
 
-import { supportedPicBedList } from '@/manage/utils/constants'
-import { useManageStore } from '@/manage/store/manageStore'
-import { newBucketConfig } from '@/manage/utils/newBucketConfig'
+import {
+  ChromeFilled,
+  CirclePlus,
+  Folder,
+  FolderOpened,
+  HomeFilled,
+  SuccessFilled,
+  Switch,
+  Tools
+} from '@element-plus/icons-vue'
+import { ElNotification } from 'element-plus'
+import { IRPCActionType } from 'root/src/universal/types/enum'
+import { computed, onBeforeMount, reactive, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 
 import { T as $T } from '@/i18n'
-import { triggerRPC } from '@/utils/common'
-import { IRPCActionType } from 'root/src/universal/types/enum'
+import { useManageStore } from '@/manage/store/manageStore'
+import { supportedPicBedList } from '@/manage/utils/constants'
+import { newBucketConfig } from '@/manage/utils/newBucketConfig'
+import { IStringKeyMap } from '#/types/types'
 
 const manageStore = useManageStore() as any
 const route = useRoute()
@@ -307,9 +356,9 @@ const menuTitleMap: IStringKeyMap = {
 
 const rules = ruleMap(newBucketConfig)
 
-const openPicBedUrl = () => shell.openExternal(urlMap[currentPagePicBedConfig.picBedName])
+const openPicBedUrl = () => window.electron.sendRPC(IRPCActionType.OPEN_URL, urlMap[currentPagePicBedConfig.picBedName])
 
-function ruleMap(options: IStringKeyMap) {
+function ruleMap (options: IStringKeyMap) {
   return Object.keys(options).reduce((result, key) => {
     options[key].options.forEach((option: string) => {
       const keyName = `${key}.${option}`
@@ -325,11 +374,11 @@ function ruleMap(options: IStringKeyMap) {
   }, {} as IStringKeyMap)
 }
 
-function openNewBucketDrawer() {
+function openNewBucketDrawer () {
   nweBucketDrawerVisible.value = true
 }
 
-function createNewBucket(picBedName: string) {
+function createNewBucket (picBedName: string) {
   const configOptions = newBucketConfig[picBedName].configOptions
   const resultMap: IStringKeyMap = Object.keys(configOptions).reduce((result, key) => {
     const resultKey = `${picBedName}.${key}`
@@ -349,7 +398,7 @@ function createNewBucket(picBedName: string) {
     resultMap.BucketName = `${resultMap.BucketName}-${currentPagePicBedConfig.appId}`
   }
   resultMap.endpoint = currentPagePicBedConfig.endpoint
-  triggerRPC(IRPCActionType.MANAGE_CREATE_BUCKET, currentAlias, resultMap).then((result: any) => {
+  window.electron.triggerRPC(IRPCActionType.MANAGE_CREATE_BUCKET, currentAlias, resultMap).then((result: any) => {
     if (result) {
       ElNotification({
         title: $T('MANAGE_MAIN_PAGE_TIPS'),
@@ -370,12 +419,12 @@ function createNewBucket(picBedName: string) {
   })
 }
 
-async function getBucketList() {
+async function getBucketList () {
   bucketList.value = {}
   bucketNameList.value = []
   isLoadingBucketList.value = true
 
-  const result = await triggerRPC<any>(IRPCActionType.MANAGE_GET_BUCKET_LIST, currentAlias.value)
+  const result = await window.electron.triggerRPC<any>(IRPCActionType.MANAGE_GET_BUCKET_LIST, currentAlias.value)
   isLoadingBucketList.value = false
 
   if (result.length > 0) {
@@ -386,17 +435,17 @@ async function getBucketList() {
   }
 }
 
-function transPathToUnix(filePath: string | undefined) {
+function transPathToUnix (filePath: string | undefined) {
   if (!filePath) return ''
-  return process.platform === 'win32'
+  return window.electron.sendRpcSync(IRPCActionType.GET_PLATFORM) === 'win32'
     ? filePath
-        .split(path.sep)
-        .join(path.posix.sep)
+        .split(window.node.path.sep)
+        .join(window.node.path.posix.sep)
         .replace(/^\/+|\/+$/g, '')
     : filePath.replace(/^\/+|\/+$/g, '')
 }
 
-function handleSelectMenu(bucketName: string) {
+function handleSelectMenu (bucketName: string) {
   const currentPicBedConfig = manageStore.config.picBed[currentAlias.value]
   const transformedConfig = JSON.parse(currentPicBedConfig.transformedConfig ?? '{}')
 
@@ -429,7 +478,7 @@ function handleSelectMenu(bucketName: string) {
   })
 }
 
-function switchPicBed(picBedAlias: string) {
+function switchPicBed (picBedAlias: string) {
   if (picBedAlias === 'main') {
     router.push({
       path: '/main-page/manage-login-page'
@@ -460,11 +509,11 @@ function switchPicBed(picBedAlias: string) {
   }
 }
 
-function changePicBed() {
+function changePicBed () {
   picBedSwitchDialogVisible.value = true
 }
 
-function openBucketPageSetting() {
+function openBucketPageSetting () {
   router.push({
     path: '/main-page/manage-main-page/manage-setting-page'
   })

src/renderer/manage/pages/ManageSetting.vue

@@ -1,12 +1,25 @@
 <template>
   <div id="manage-setting">
-    <el-row class="view-title" align="middle" justify="center" style="font-size: 20px; color: black">
+    <el-row
+      class="view-title"
+      align="middle"
+      justify="center"
+      style="font-size: 20px; color: black"
+    >
       {{ $T('MANAGE_SETTING_TITLE') }}
     </el-row>
     <el-row class="setting-list">
-      <el-col :span="20" :offset="2">
+      <el-col
+        :span="20"
+        :offset="2"
+      >
         <el-row style="width: 100%">
-          <el-form label-position="left" label-width="50%" size="default" style="position: relative; width: 100%">
+          <el-form
+            label-position="left"
+            label-width="50%"
+            size="default"
+            style="position: relative; width: 100%"
+          >
             <el-form-item>
               <template #label>
                 <span style="position: absolute; left: 0">
@@ -37,7 +50,11 @@
                 @confirm="handleClearDb"
               >
                 <template #reference>
-                  <el-button type="primary" plain style="position: absolute; right: 0">
+                  <el-button
+                    type="primary"
+                    plain
+                    style="position: absolute; right: 0"
+                  >
                     {{ $T('MANAGE_SETTING_CLEAR_CACHE_BUTTON') }}
                   </el-button>
                 </template>
@@ -82,7 +99,7 @@
                 width="150"
               />
             </el-table>
-            <br v-if="form.customRename" />
+            <br v-if="form.customRename">
             <DynamicSwitch
               v-for="item in switchFieldsSpecialList"
               :key="item.configName"
@@ -142,12 +159,19 @@
                 :step="1"
               />
             </el-form-item>
-            <el-link style="margin-top: 10px; margin-bottom: 10px; color: #409eff" :underline="false">
+            <el-link
+              style="margin-top: 10px; margin-bottom: 10px; color: #409eff"
+              :underline="false"
+            >
               {{ $T('MANAGE_SETTING_CHOOSE_COPY_FORMAT_TITLE') }}
             </el-link>
-            <br />
+            <br>
             <el-radio-group v-model="form.pasteFormat">
-              <el-radio v-for="item in pasteFormatList" :key="item" :value="item">
+              <el-radio
+                v-for="item in pasteFormatList"
+                :key="item"
+                :value="item"
+              >
                 {{ $T(`MANAGE_SETTING_CHOOSE_COPY_FORMAT_${item.toUpperCase().replace(/-/g, '_')}` as any) }}
               </el-radio>
             </el-radio-group>
@@ -165,7 +189,10 @@
               style="width: 100%"
             />
             <div>
-              <el-link style="margin-top: 10px; margin-bottom: 10px; color: #409eff" :underline="false">
+              <el-link
+                style="margin-top: 10px; margin-bottom: 10px; color: #409eff"
+                :underline="false"
+              >
                 {{ $T('MANAGE_SETTING_CHOOSE_DOWNLOAD_FOLDER_TITLE') }}
               </el-link>
             </div>
@@ -176,7 +203,10 @@
               style="width: 100%; margin-top: 10px"
             >
               <template #append>
-                <el-button type="primary" @click="handleDownloadDirClick">
+                <el-button
+                  type="primary"
+                  @click="handleDownloadDirClick"
+                >
                   <el-icon>
                     <Folder />
                   </el-icon>
@@ -193,19 +223,17 @@
 </template>
 
 <script lang="ts" setup>
+import { Folder, InfoFilled } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
-import { InfoFilled, Folder } from '@element-plus/icons-vue'
-import { ref, onBeforeMount, watch } from 'vue'
-
-import DynamicSwitch from '@/manage/components/DynamicSwitch.vue'
-import { fileCacheDbInstance } from '@/manage/store/bucketFileDb'
-import { formatFileSize, customRenameFormatTable } from '@/manage/utils/common'
-import { getConfig, saveConfig } from '@/manage/utils/dataSender'
+import { IRPCActionType } from 'root/src/universal/types/enum'
+import { onBeforeMount, ref, watch } from 'vue'
 
 import { T as $T } from '@/i18n'
-
-import { triggerRPC } from '@/utils/common'
-import { IRPCActionType } from 'root/src/universal/types/enum'
+import DynamicSwitch from '@/manage/components/DynamicSwitch.vue'
+import { fileCacheDbInstance } from '@/manage/store/bucketFileDb'
+import { customRenameFormatTable, formatFileSize } from '@/manage/utils/common'
+import { getConfig, saveConfig } from '@/manage/utils/dataSender'
+import { IStringKeyMap } from '#/types/types'
 
 const form = ref<IStringKeyMap>({
   timestampRename: false,
@@ -315,15 +343,15 @@ const switchFieldsSpecialList = [
   }
 ]
 
-async function initData() {
+async function initData () {
   const config = (await getConfig()) as IStringKeyMap
   settingsKeys.forEach(key => {
     form.value[key] = config.settings[key] ?? form.value[key]
   })
 }
 
-async function handleDownloadDirClick() {
-  const result = await triggerRPC<any>(IRPCActionType.MANAGE_SELECT_DOWNLOAD_FOLDER)
+async function handleDownloadDirClick () {
+  const result = await window.electron.triggerRPC<any>(IRPCActionType.MANAGE_SELECT_DOWNLOAD_FOLDER)
   if (result) {
     form.value.downloadDir = result
   }
@@ -334,7 +362,7 @@ const handleCellClick = (row: any, column: any) => {
   ElMessage.success(`${$T('MANAGE_SETTING_COPY_MESSAGE')}${row[column.property]}`)
 }
 
-function handleClearDb() {
+function handleClearDb () {
   fileCacheDbInstance
     .delete()
     .then(() => {
@@ -346,7 +374,7 @@ function handleClearDb() {
     })
 }
 
-async function getIndexDbSize() {
+async function getIndexDbSize () {
   const size = (await navigator.storage.estimate()).usage ?? 0
   const quota = (await navigator.storage.estimate()).quota ?? 0
   dbSize.value = size