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

2026-05-22 00:30:33 +08:00 · 2025-07-31 17:37:30 +08:00
parent cd76bc7c10
commit 054f4b4cff
597 changed files with 197292 additions and 13329 deletions
--- a/src/renderer/components/ConfigForm.vue
+++ b/src/renderer/components/ConfigForm.vue
@@ -1,8 +1,26 @@
+<!-- eslint-disable vue/no-v-html -->
 <template>
-  <div id="config-form" :class="props.colorMode === 'white' ? 'white' : ''">
-    <el-form ref="$form" label-position="left" label-width="50%" :model="ruleForm" size="small">
-      <el-form-item :label="$T('UPLOADER_CONFIG_NAME')" required prop="_configName">
-        <el-input v-model="ruleForm._configName" type="input" :placeholder="$T('UPLOADER_CONFIG_PLACEHOLDER')" />
+  <div
+    id="config-form"
+    :class="props.colorMode === 'white' ? 'white' : ''"
+  >
+    <el-form
+      ref="$form"
+      label-position="left"
+      label-width="50%"
+      :model="ruleForm"
+      size="small"
+    >
+      <el-form-item
+        :label="$T('UPLOADER_CONFIG_NAME')"
+        required
+        prop="_configName"
+      >
+        <el-input
+          v-model="ruleForm._configName"
+          type="input"
+          :placeholder="$T('UPLOADER_CONFIG_PLACEHOLDER')"
+        />
      </el-form-item>
      <!-- dynamic config -->
      <el-form-item
@@ -15,9 +33,18 @@
          <el-row align="middle">
            {{ item.alias || item.name }}
            <template v-if="item.tips">
-              <el-tooltip class="item" effect="dark" placement="right" :persistent="false" teleported>
+              <el-tooltip
+                class="item"
+                effect="dark"
+                placement="right"
+                :persistent="false"
+                teleported
+              >
                <template #content>
-                  <span class="config-form-common-tips" v-html="transformMarkdownToHTML(item.tips)" />
+                  <span
+                    class="config-form-common-tips"
+                    v-html="transformMarkdownToHTML(item.tips)"
+                  />
                </template>
                <el-icon class="ml-[4px] cursor-pointer hover:text-blue">
                  <InfoFilled />
@@ -75,14 +102,16 @@
 </template>

 <script lang="ts" setup>
-import type { FormInstance } from 'element-plus'
-import { cloneDeep, union } from 'lodash'
-import { marked } from 'marked'
-import { reactive, ref, watch, toRefs } from 'vue'
-import { useRoute } from 'vue-router'
 import { InfoFilled } from '@element-plus/icons-vue'
+import type { FormInstance } from 'element-plus'
+import { cloneDeep, union } from 'lodash-es'
+import { marked } from 'marked'
+import { reactive, ref, toRefs, watch } from 'vue'
+import { useRoute } from 'vue-router'

+import { T as $T } from '@/i18n/index'
 import { getConfig } from '@/utils/dataSender'
+import { IPicGoPluginConfig, IStringKeyMap } from '#/types/types'

 interface IProps {
  config: any[]
@@ -109,11 +138,11 @@ watch(
  }
 )

-function handleConfigChange(val: any) {
+function handleConfigChange (val: any) {
  handleConfig(val)
 }

-async function validate(): Promise<IStringKeyMap | false> {
+async function validate (): Promise<IStringKeyMap | false> {
  return new Promise(resolve => {
    $form.value?.validate((valid: boolean) => {
      if (valid) {
@@ -125,7 +154,7 @@ async function validate(): Promise<IStringKeyMap | false> {
  })
 }

-function transformMarkdownToHTML(markdown: string) {
+function transformMarkdownToHTML (markdown: string) {
  try {
    return marked.parse(markdown)
  } catch (e) {
@@ -133,7 +162,7 @@ function transformMarkdownToHTML(markdown: string) {
  }
 }

-function getConfigType() {
+function getConfigType () {
  switch (props.type) {
    case 'plugin': {
      return props.id
@@ -149,7 +178,7 @@ function getConfigType() {
  }
 }

-async function handleConfig(val: IPicGoPluginConfig[]) {
+async function handleConfig (val: IPicGoPluginConfig[]) {
  const config = await getCurConfigFormData()
  const configId = $route.params.configId
  Object.assign(ruleForm, config)
@@ -175,13 +204,13 @@ async function handleConfig(val: IPicGoPluginConfig[]) {
  }
 }

-async function getCurConfigFormData() {
+async function getCurConfigFormData () {
  const configId = $route.params.configId
  const curTypeConfigList = (await getConfig<IStringKeyMap[]>(`uploader.${props.id}.configList`)) || []
  return curTypeConfigList.find(i => i._id === configId) || {}
 }

-function updateRuleForm(key: string, value: any) {
+function updateRuleForm (key: string, value: any) {
  try {
    ruleForm[key] = value
  } catch (e) {
--- a/src/renderer/components/ConfigFormForPlugin.vue
+++ b/src/renderer/components/ConfigFormForPlugin.vue
@@ -1,8 +1,25 @@
 <template>
-  <div id="config-form" :class="props.colorMode === 'white' ? 'white' : ''">
-    <el-form ref="$form" label-position="left" label-width="50%" :model="ruleForm" size="small">
-      <el-form-item :label="$T('UPLOADER_CONFIG_NAME')" required prop="_configName">
-        <el-input v-model="ruleForm._configName" type="input" :placeholder="$T('UPLOADER_CONFIG_PLACEHOLDER')" />
+  <div
+    id="config-form"
+    :class="props.colorMode === 'white' ? 'white' : ''"
+  >
+    <el-form
+      ref="$form"
+      label-position="left"
+      label-width="50%"
+      :model="ruleForm"
+      size="small"
+    >
+      <el-form-item
+        :label="$T('UPLOADER_CONFIG_NAME')"
+        required
+        prop="_configName"
+      >
+        <el-input
+          v-model="ruleForm._configName"
+          type="input"
+          :placeholder="$T('UPLOADER_CONFIG_PLACEHOLDER')"
+        />
      </el-form-item>
      <!-- dynamic config -->
      <el-form-item
@@ -62,11 +79,12 @@

 <script lang="ts" setup>
 import type { FormInstance } from 'element-plus'
-import { cloneDeep, union } from 'lodash'
+import { cloneDeep, union } from 'lodash-es'
 import { reactive, ref, watch } from 'vue'

-import { getConfig } from '@/utils/dataSender'
 import { T as $T } from '@/i18n'
+import { getConfig } from '@/utils/dataSender'
+import { IPicGoPluginConfig, IStringKeyMap } from '#/types/types'

 interface IProps {
  config: any[]
@@ -92,11 +110,11 @@ watch(
  }
 )

-function handleConfigChange(val: any) {
+function handleConfigChange (val: any) {
  handleConfig(val)
 }

-async function validate(): Promise<IStringKeyMap | false> {
+async function validate (): Promise<IStringKeyMap | false> {
  return new Promise(resolve => {
    $form.value?.validate((valid: boolean) => {
      if (valid) {
@@ -108,7 +126,7 @@ async function validate(): Promise<IStringKeyMap | false> {
  })
 }

-function getConfigType() {
+function getConfigType () {
  switch (props.type) {
    case 'plugin': {
      return props.id
@@ -124,7 +142,7 @@ function getConfigType() {
  }
 }

-async function handleConfig(val: IPicGoPluginConfig[]) {
+async function handleConfig (val: IPicGoPluginConfig[]) {
  const config = await getCurConfigFormData()
  Object.assign(ruleForm, config)
  if (val.length > 0) {
@@ -148,11 +166,11 @@ async function handleConfig(val: IPicGoPluginConfig[]) {
  }
 }

-async function getCurConfigFormData() {
+async function getCurConfigFormData () {
  return (await getConfig<IStringKeyMap>(`${props.id}`)) || {}
 }

-function updateRuleForm(key: string, value: any) {
+function updateRuleForm (key: string, value: any) {
  try {
    ruleForm[key] = value
  } catch (e) {
--- a/src/renderer/components/ImageLocal.vue
+++ b/src/renderer/components/ImageLocal.vue
@@ -3,7 +3,7 @@
    :src="
      isShowThumbnail && item.isImage
        ? base64Image
-        : require(`../manage/pages/assets/icons/${getFileIconPath(item.fileName ?? '')}`)
+        : `/assets/icons/${getFileIconPath(item.fileName ?? '')}`
    "
    fit="contain"
    style="height: 100px; width: 100%; margin: 0 auto"
@@ -15,7 +15,7 @@
    </template>
    <template #error>
      <el-image
-        :src="require(`../manage/pages/assets/icons/${getFileIconPath(item.fileName ?? '')}`)"
+        :src="`/assets/icons/${getFileIconPath(item.fileName ?? '')}`"
        fit="contain"
        style="height: 100px; width: 100%; margin: 0 auto"
      />
@@ -24,11 +24,9 @@
 </template>

 <script lang="ts" setup>
-import fs from 'fs-extra'
-import mime from 'mime-types'
-import path from 'path'
-import { ref, onBeforeMount } from 'vue'
+
 import { Loading } from '@element-plus/icons-vue'
+import { onBeforeMount, ref } from 'vue'

 import { getFileIconPath } from '@/manage/utils/common'

@@ -43,9 +41,9 @@ const props = defineProps<{
 }>()

 const createBase64Image = async () => {
-  const filePath = path.normalize(props.localPath)
-  const base64 = await fs.readFile(filePath, 'base64')
-  base64Image.value = `data:${mime.lookup(filePath) || 'image/png'};base64,${base64}`
+  const filePath = window.node.path.normalize(props.localPath)
+  const base64 = await window.node.fs.readFile(filePath, 'base64')
+  base64Image.value = `data:${window.node.mime.lookup(filePath) || 'image/png'};base64,${base64}`
 }

 onBeforeMount(async () => {
--- a/src/renderer/components/ImagePreSign.vue
+++ b/src/renderer/components/ImagePreSign.vue
@@ -1,23 +1,30 @@
 <template>
-  <el-image :src="imageSource" fit="contain" style="height: 100px; width: 100%; margin: 0 auto">
+  <el-image
+    :src="imageSource"
+    fit="contain"
+    style="height: 100px; width: 100%; margin: 0 auto"
+  >
    <template #placeholder>
      <el-icon>
        <Loading />
      </el-icon>
    </template>
    <template #error>
-      <el-image :src="iconPath" fit="contain" style="height: 100px; width: 100%; margin: 0 auto" />
+      <el-image
+        :src="iconPath"
+        fit="contain"
+        style="height: 100px; width: 100%; margin: 0 auto"
+      />
    </template>
  </el-image>
 </template>

 <script lang="ts" setup>
-import { ref, onMounted, watch, computed } from 'vue'
 import { Loading } from '@element-plus/icons-vue'
+import { computed, onMounted, ref, watch } from 'vue'

 import { getFileIconPath } from '@/manage/utils/common'
 import { IRPCActionType } from '#/types/enum'
-import { triggerRPC } from '@/utils/common'

 const preSignedUrl = ref('')

@@ -36,13 +43,13 @@ const props = defineProps<{
 const imageSource = computed(() => {
  return props.isShowThumbnail && props.item.isImage
    ? preSignedUrl.value
-    : require(`../manage/pages/assets/icons/${getFileIconPath(props.item.fileName ?? '')}`)
+    : `/assets/icons/${getFileIconPath(props.item.fileName ?? '')}`
 })

-const iconPath = computed(() => require(`../manage/pages/assets/icons/${getFileIconPath(props.item.fileName ?? '')}`))
+const iconPath = computed(() => `/assets/icons/${getFileIconPath(props.item.fileName ?? '')}`)

-async function getUrl() {
-  preSignedUrl.value = await triggerRPC<any>(IRPCActionType.MANAGE_GET_PRE_SIGNED_URL, props.alias, props.config)
+async function getUrl () {
+  preSignedUrl.value = await window.electron.triggerRPC<any>(IRPCActionType.MANAGE_GET_PRE_SIGNED_URL, props.alias, props.config)
 }

 watch(() => [props.url, props.item], getUrl, { deep: true })
--- a/src/renderer/components/ImagePreSignTsx.tsx
+++ b/src/renderer/components/ImagePreSignTsx.tsx
@@ -1,10 +1,9 @@
-import { ElImage, ElIcon } from 'element-plus'
-import { defineComponent, ref, onMounted, watch, computed } from 'vue'
 import { Loading } from '@element-plus/icons-vue'
+import { ElIcon, ElImage } from 'element-plus'
+import { computed, defineComponent, onMounted, ref, watch } from 'vue'

 import { getFileIconPath } from '@/manage/utils/common'
 import { IRPCActionType } from '#/types/enum'
-import { triggerRPC } from '@/utils/common'

 export default defineComponent({
  props: {
@@ -30,20 +29,20 @@ export default defineComponent({
    }
  },

-  setup(props) {
+  setup (props) {
    const preSignedUrl = ref('')

    const imageSource = computed(() => {
      return props.isShowThumbnail && props.item.isImage
        ? preSignedUrl.value
-        : require(`../manage/pages/assets/icons/${getFileIconPath(props.item.fileName ?? '')}`)
+        : `/assets/icons/${getFileIconPath(props.item.fileName ?? '')}`
    })
    const iconPath = computed(() =>
-      require(`../manage/pages/assets/icons/${getFileIconPath(props.item.fileName ?? '')}`)
+      `/assets/icons/${getFileIconPath(props.item.fileName ?? '')}`
    )

-    async function getUrl() {
-      preSignedUrl.value = await triggerRPC<any>(IRPCActionType.MANAGE_GET_PRE_SIGNED_URL, props.alias, props.config)
+    async function getUrl () {
+      preSignedUrl.value = await window.electron.triggerRPC<any>(IRPCActionType.MANAGE_GET_PRE_SIGNED_URL, props.alias, props.config)
    }

    watch(() => [props.url, props.item], getUrl, { deep: true })
--- a/src/renderer/components/ImageProcessSetting.vue
+++ b/src/renderer/components/ImageProcessSetting.vue
@@ -7,15 +7,25 @@
    :model="waterMarkForm"
  >
    <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_SKIP_PROCESS_EXT_LIST')">
-      <el-input v-model="skipProcessForm.skipProcessExtList" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" />
+      <el-input
+        v-model="skipProcessForm.skipProcessExtList"
+        type="textarea"
+        :autosize="{ minRows: 2, maxRows: 4 }"
+      />
      <div class="text-xs text-gray-500">
        {{ $T('UPLOAD_PAGE_IMAGE_PROCESS_SKIP_PROCESS_EXT_LIST_TIPS') }}
      </div>
    </el-form-item>
    <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISADDWM')">
-      <el-switch v-model="waterMarkForm.isAddWatermark" :style="switchStyle" />
+      <el-switch
+        v-model="waterMarkForm.isAddWatermark"
+        :style="switchStyle"
+      />
    </el-form-item>
-    <el-form-item v-show="waterMarkForm.isAddWatermark" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE')">
+    <el-form-item
+      v-show="waterMarkForm.isAddWatermark"
+      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE')"
+    >
      <el-radio-group v-model="waterMarkForm.watermarkType">
        <el-radio value="text">
          {{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_TEXT') }}
@@ -25,11 +35,23 @@
        </el-radio>
      </el-radio-group>
    </el-form-item>
-    <el-form-item v-show="waterMarkForm.isAddWatermark" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISFULLSCREEN_WM')">
-      <el-switch v-model="waterMarkForm.isFullScreenWatermark" :style="switchStyle" />
+    <el-form-item
+      v-show="waterMarkForm.isAddWatermark"
+      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISFULLSCREEN_WM')"
+    >
+      <el-switch
+        v-model="waterMarkForm.isFullScreenWatermark"
+        :style="switchStyle"
+      />
    </el-form-item>
-    <el-form-item v-show="waterMarkForm.isAddWatermark" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMDEGREE')">
-      <el-input-number v-model="waterMarkForm.watermarkDegree" :step="1" />
+    <el-form-item
+      v-show="waterMarkForm.isAddWatermark"
+      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMDEGREE')"
+    >
+      <el-input-number
+        v-model="waterMarkForm.watermarkDegree"
+        :step="1"
+      />
    </el-form-item>
    <el-form-item
      v-show="waterMarkForm.isAddWatermark && waterMarkForm.watermarkType === 'text'"
@@ -43,14 +65,25 @@
    >
      <el-input v-model="waterMarkForm.watermarkFontPath" />
    </el-form-item>
-    <el-form-item v-show="waterMarkForm.isAddWatermark" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMRATIO')">
-      <el-input-number v-model="waterMarkForm.watermarkScaleRatio" :min="0" :max="1" :step="0.01" />
+    <el-form-item
+      v-show="waterMarkForm.isAddWatermark"
+      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMRATIO')"
+    >
+      <el-input-number
+        v-model="waterMarkForm.watermarkScaleRatio"
+        :min="0"
+        :max="1"
+        :step="0.01"
+      />
    </el-form-item>
    <el-form-item
      v-show="waterMarkForm.isAddWatermark && waterMarkForm.watermarkType === 'text'"
      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMCOLOR')"
    >
-      <el-color-picker v-model="waterMarkForm.watermarkColor" show-alpha />
+      <el-color-picker
+        v-model="waterMarkForm.watermarkColor"
+        show-alpha
+      />
    </el-form-item>
    <el-form-item
      v-show="waterMarkForm.isAddWatermark && waterMarkForm.watermarkType === 'image'"
@@ -58,76 +91,157 @@
    >
      <el-input v-model="waterMarkForm.watermarkImagePath" />
    </el-form-item>
-    <el-form-item v-show="waterMarkForm.isAddWatermark" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMPOSITION')">
+    <el-form-item
+      v-show="waterMarkForm.isAddWatermark"
+      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMPOSITION')"
+    >
      <el-radio-group v-model="waterMarkForm.watermarkPosition">
-        <el-radio v-for="item in waterMarkPositionMap" :key="item[0]" :value="item[0]">
+        <el-radio
+          v-for="item in waterMarkPositionMap"
+          :key="item[0]"
+          :value="item[0]"
+        >
          {{ item[1] }}
        </el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISREMOVEEXIF')">
-      <el-switch v-model="compressForm.isRemoveExif" :style="switchStyle" />
+      <el-switch
+        v-model="compressForm.isRemoveExif"
+        :style="switchStyle"
+      />
    </el-form-item>
    <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_QUALITY')">
-      <el-input-number v-model="compressForm.quality" :min="1" :max="100" :step="1" />
+      <el-input-number
+        v-model="compressForm.quality"
+        :min="1"
+        :max="100"
+        :step="1"
+      />
    </el-form-item>
    <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISCONVERT')">
-      <el-switch v-model="compressForm.isConvert" :style="switchStyle" />
+      <el-switch
+        v-model="compressForm.isConvert"
+        :style="switchStyle"
+      />
    </el-form-item>
-    <el-form-item v-show="compressForm.isConvert" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT')">
-      <el-select v-model="compressForm.convertFormat" :persistent="false" teleported>
-        <el-option v-for="item in availableFormat" :key="item" :label="item" :value="item" />
+    <el-form-item
+      v-show="compressForm.isConvert"
+      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT')"
+    >
+      <el-select
+        v-model="compressForm.convertFormat"
+        :persistent="false"
+        teleported
+      >
+        <el-option
+          v-for="item in availableFormat"
+          :key="item"
+          :label="item"
+          :value="item"
+        />
      </el-select>
    </el-form-item>
-    <el-form-item v-show="compressForm.isConvert" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT_SPECIFIC')">
+    <el-form-item
+      v-show="compressForm.isConvert"
+      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT_SPECIFIC')"
+    >
      <el-input
        v-model="formatConvertObj"
-        placeholder='{"jpg": "png", "png": "jpg"}'
+        placeholder="{&quot;jpg&quot;: &quot;png&quot;, &quot;png&quot;: &quot;jpg&quot;}"
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 4 }"
      />
    </el-form-item>
    <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISFLIP')">
-      <el-switch v-model="compressForm.isFlip" :style="switchStyle" />
+      <el-switch
+        v-model="compressForm.isFlip"
+        :style="switchStyle"
+      />
    </el-form-item>
    <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISFLOP')">
-      <el-switch v-model="compressForm.isFlop" :style="switchStyle" />
+      <el-switch
+        v-model="compressForm.isFlop"
+        :style="switchStyle"
+      />
    </el-form-item>
    <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISRESIZE')">
-      <el-switch v-model="compressForm.isReSize" :style="switchStyle" />
+      <el-switch
+        v-model="compressForm.isReSize"
+        :style="switchStyle"
+      />
    </el-form-item>
-    <el-form-item v-show="compressForm.isReSize" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_RESIZEWIDTH')">
-      <el-input-number v-model="compressForm.reSizeWidth" :min="0" />
+    <el-form-item
+      v-show="compressForm.isReSize"
+      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_RESIZEWIDTH')"
+    >
+      <el-input-number
+        v-model="compressForm.reSizeWidth"
+        :min="0"
+      />
    </el-form-item>
-    <el-form-item v-show="compressForm.isReSize" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_RESIZEHEIGHT')">
-      <el-input-number v-model="compressForm.reSizeHeight" :min="0" />
+    <el-form-item
+      v-show="compressForm.isReSize"
+      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_RESIZEHEIGHT')"
+    >
+      <el-input-number
+        v-model="compressForm.reSizeHeight"
+        :min="0"
+      />
    </el-form-item>
    <el-form-item
      v-show="compressForm.isReSize && compressForm.reSizeHeight! > 0 && compressForm.reSizeWidth === 0"
      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_SKIPRESIZEOfSMALLIMG_HEIGHT')"
    >
-      <el-switch v-model="compressForm.skipReSizeOfSmallImg" :style="switchStyle" />
+      <el-switch
+        v-model="compressForm.skipReSizeOfSmallImg"
+        :style="switchStyle"
+      />
    </el-form-item>
    <el-form-item
      v-show="compressForm.isReSize && compressForm.reSizeWidth! > 0 && compressForm.reSizeHeight === 0"
      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_SKIPRESIZEOfSMALLIMG_WIDTH')"
    >
-      <el-switch v-model="compressForm.skipReSizeOfSmallImg" :style="switchStyle" />
+      <el-switch
+        v-model="compressForm.skipReSizeOfSmallImg"
+        :style="switchStyle"
+      />
    </el-form-item>
    <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISRESIZEBYPERCENT')">
-      <el-switch v-model="compressForm.isReSizeByPercent" :style="switchStyle" />
+      <el-switch
+        v-model="compressForm.isReSizeByPercent"
+        :style="switchStyle"
+      />
    </el-form-item>
-    <el-form-item v-show="compressForm.isReSizeByPercent" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_RESIZEPERCENT')">
-      <el-input-number v-model="compressForm.reSizePercent" :min="0" />
+    <el-form-item
+      v-show="compressForm.isReSizeByPercent"
+      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_RESIZEPERCENT')"
+    >
+      <el-input-number
+        v-model="compressForm.reSizePercent"
+        :min="0"
+      />
    </el-form-item>
    <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISROTATE')">
-      <el-switch v-model="compressForm.isRotate" :style="switchStyle" />
+      <el-switch
+        v-model="compressForm.isRotate"
+        :style="switchStyle"
+      />
    </el-form-item>
-    <el-form-item v-show="compressForm.isRotate" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ROTATEDEGREE')">
-      <el-input-number v-model="compressForm.rotateDegree" :step="1" />
+    <el-form-item
+      v-show="compressForm.isRotate"
+      :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ROTATEDEGREE')"
+    >
+      <el-input-number
+        v-model="compressForm.rotateDegree"
+        :step="1"
+      />
    </el-form-item>
    <el-form-item>
-      <el-button type="primary" @click="handleSaveConfig">
+      <el-button
+        type="primary"
+        @click="handleSaveConfig"
+      >
        {{ $T('UPLOAD_PAGE_IMAGE_PROCESS_CONFIRM') }}
      </el-button>
      <el-button @click="closeDialog">
@@ -138,7 +252,7 @@
 </template>

 <script lang="ts" setup>
-import { IBuildInCompressOptions, IBuildInWaterMarkOptions } from 'piclist'
+import type { IBuildInCompressOptions, IBuildInWaterMarkOptions } from 'piclist'
 import { onBeforeMount, reactive, ref, toRaw } from 'vue'

 import { T as $T } from '@/i18n/index'
@@ -224,7 +338,7 @@ const skipProcessFormKeys = Object.keys(skipProcessForm) as (keyof typeof skipPr

 const switchStyle = '--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;'

-function handleSaveConfig() {
+function handleSaveConfig () {
  let iformatConvertObj = {}
  try {
    iformatConvertObj = JSON.parse(formatConvertObj.value)
@@ -242,7 +356,7 @@ function handleSaveConfig() {
  closeDialog()
 }

-async function initData() {
+async function initData () {
  const compress = await getConfig<any>(configPaths.buildIn.compress)
  const watermark = await getConfig<any>(configPaths.buildIn.watermark)
  const skipProcess = await getConfig<any>(configPaths.buildIn.skipProcess)
@@ -273,7 +387,7 @@ async function initData() {
  }
 }

-function closeDialog() {
+function closeDialog () {
  imageProcessDialogVisible.value = false
 }

--- a/src/renderer/components/ImageWebdav.vue
+++ b/src/renderer/components/ImageWebdav.vue
@@ -1,23 +1,30 @@
 <template>
-  <el-image :src="imageSource" fit="contain" style="height: 100px; width: 100%; margin: 0 auto">
+  <el-image
+    :src="imageSource"
+    fit="contain"
+    style="height: 100px; width: 100%; margin: 0 auto"
+  >
    <template #placeholder>
      <el-icon>
        <Loading />
      </el-icon>
    </template>
    <template #error>
-      <el-image :src="iconPath" fit="contain" style="height: 100px; width: 100%; margin: 0 auto" />
+      <el-image
+        :src="iconPath"
+        fit="contain"
+        style="height: 100px; width: 100%; margin: 0 auto"
+      />
    </template>
  </el-image>
 </template>

 <script lang="ts" setup>
-import { ref, onMounted, watch, computed } from 'vue'
 import { Loading } from '@element-plus/icons-vue'
+import { computed, onMounted, ref, watch } from 'vue'

-import { getAuthHeader } from '@/manage/utils/digestAuth'
 import { getFileIconPath } from '@/manage/utils/common'
-
+import { getAuthHeader } from '@/manage/utils/digestAuth'
 import { formatEndpoint } from '#/utils/common'

 const base64Url = ref('')
@@ -37,12 +44,12 @@ const props = defineProps<{
 const imageSource = computed(() => {
  return props.isShowThumbnail && props.item.isImage && success.value
    ? base64Url.value
-    : require(`../manage/pages/assets/icons/${getFileIconPath(props.item.fileName ?? '')}`)
+    : `/assets/icons/${getFileIconPath(props.item.fileName ?? '')}`
 })

-const iconPath = computed(() => require(`../manage/pages/assets/icons/${getFileIconPath(props.item.fileName ?? '')}`))
+const iconPath = computed(() => `/assets/icons/${getFileIconPath(props.item.fileName ?? '')}`)

-async function getWebdavHeader(key: string) {
+async function getWebdavHeader (key: string) {
  let headers = {} as any
  if (props.config.authType === 'digest') {
    const authHeader = await getAuthHeader(
--- a/src/renderer/components/ImageWebdavTsx.tsx
+++ b/src/renderer/components/ImageWebdavTsx.tsx
@@ -1,10 +1,9 @@
-import { ElImage, ElIcon } from 'element-plus'
-import { defineComponent, ref, onMounted, watch, computed } from 'vue'
 import { Loading } from '@element-plus/icons-vue'
+import { ElIcon, ElImage } from 'element-plus'
+import { computed, defineComponent, onMounted, ref, watch } from 'vue'

 import { getFileIconPath } from '@/manage/utils/common'
 import { getAuthHeader } from '@/manage/utils/digestAuth'
-
 import { formatEndpoint } from '#/utils/common'

 export default defineComponent({
@@ -27,20 +26,20 @@ export default defineComponent({
    }
  },

-  setup(props) {
+  setup (props) {
    const base64Url = ref('')
    const success = ref(false)

    const imageSource = computed(() => {
      return props.isShowThumbnail && props.item.isImage && success.value
        ? base64Url.value
-        : require(`../manage/pages/assets/icons/${getFileIconPath(props.item.fileName ?? '')}`)
+        : `/assets/icons/${getFileIconPath(props.item.fileName ?? '')}`
    })
    const iconPath = computed(() =>
-      require(`../manage/pages/assets/icons/${getFileIconPath(props.item.fileName ?? '')}`)
+      `/assets/icons/${getFileIconPath(props.item.fileName ?? '')}`
    )

-    async function getWebdavHeader(key: string) {
+    async function getWebdavHeader (key: string) {
      let headers = {} as any
      if (props.config.authType === 'digest') {
        const authHeader = await getAuthHeader(
--- a/src/renderer/components/InputBoxDialog.vue
+++ b/src/renderer/components/InputBoxDialog.vue
@@ -5,12 +5,22 @@
    :modal-append-to-body="false"
    append-to-body
  >
-    <el-input v-model="inputBoxValue" :placeholder="inputBoxOptions.placeholder" />
+    <el-input
+      v-model="inputBoxValue"
+      :placeholder="inputBoxOptions.placeholder"
+    />
    <template #footer>
-      <el-button round @click="handleInputBoxCancel">
+      <el-button
+        round
+        @click="handleInputBoxCancel"
+      >
        {{ $T('CANCEL') }}
      </el-button>
-      <el-button type="primary" round @click="handleInputBoxConfirm">
+      <el-button
+        type="primary"
+        round
+        @click="handleInputBoxConfirm"
+      >
        {{ $T('CONFIRM') }}
      </el-button>
    </template>
@@ -18,14 +28,13 @@
 </template>

 <script lang="ts" setup>
-import { ipcRenderer, IpcRendererEvent } from 'electron'
-import { ref, reactive, onBeforeUnmount, onBeforeMount } from 'vue'
+import type { IpcRendererEvent } from 'electron'
+import { onBeforeMount, onBeforeUnmount, reactive, ref } from 'vue'

 import { T as $T } from '@/i18n/index'
 import $bus from '@/utils/bus'
-import { sendToMain } from '@/utils/common'
-
 import { SHOW_INPUT_BOX, SHOW_INPUT_BOX_RESPONSE } from '#/events/constants'
+import { IShowInputBoxOption } from '#/types/types'

 const inputBoxValue = ref('')
 const showInputBoxVisible = ref(false)
@@ -35,36 +44,36 @@ const inputBoxOptions = reactive({
 })

 onBeforeMount(() => {
-  ipcRenderer.on(SHOW_INPUT_BOX, ipcEventHandler)
+  window.electron.ipcRendererOn(SHOW_INPUT_BOX, ipcEventHandler)
  $bus.on(SHOW_INPUT_BOX, initInputBoxValue)
 })

-function ipcEventHandler(_: IpcRendererEvent, options: IShowInputBoxOption) {
+function ipcEventHandler (_: IpcRendererEvent, options: IShowInputBoxOption) {
  initInputBoxValue(options)
 }

-function initInputBoxValue(options: IShowInputBoxOption) {
+function initInputBoxValue (options: IShowInputBoxOption) {
  inputBoxValue.value = options.value || ''
  inputBoxOptions.title = options.title || ''
  inputBoxOptions.placeholder = options.placeholder || ''
  showInputBoxVisible.value = true
 }

-function handleInputBoxCancel() {
+function handleInputBoxCancel () {
  // TODO: RPCServer
  showInputBoxVisible.value = false
-  sendToMain(SHOW_INPUT_BOX, '')
+  window.electron.sendToMain(SHOW_INPUT_BOX, '')
  $bus.emit(SHOW_INPUT_BOX_RESPONSE, '')
 }

-function handleInputBoxConfirm() {
+function handleInputBoxConfirm () {
  showInputBoxVisible.value = false
-  sendToMain(SHOW_INPUT_BOX, inputBoxValue.value)
+  window.electron.sendToMain(SHOW_INPUT_BOX, inputBoxValue.value)
  $bus.emit(SHOW_INPUT_BOX_RESPONSE, inputBoxValue.value)
 }

 onBeforeUnmount(() => {
-  ipcRenderer.removeListener(SHOW_INPUT_BOX, ipcEventHandler)
+  window.electron.ipcRendererRemoveListener(SHOW_INPUT_BOX, ipcEventHandler)
  $bus.off(SHOW_INPUT_BOX)
 })
 </script>
--- a/src/renderer/components/ToolboxHandler.vue
+++ b/src/renderer/components/ToolboxHandler.vue
@@ -1,6 +1,10 @@
 <template>
  <div class="toolbox-handler">
-    <ElButton type="primary" :link="true" @click="() => props.handler(value)">
+    <ElButton
+      type="primary"
+      :link="true"
+      @click="() => props.handler(value)"
+    >
      {{ props.handlerText }}
    </ElButton>
  </div>
--- a/src/renderer/components/ToolboxStatusIcon.vue
+++ b/src/renderer/components/ToolboxStatusIcon.vue
@@ -1,5 +1,8 @@
 <template>
-  <el-icon :color="color" class="toolbox-status-icon">
+  <el-icon
+    :color="color"
+    class="toolbox-status-icon"
+  >
    <template v-if="props.status === IToolboxItemCheckStatus.SUCCESS">
      <SuccessFilled />
    </template>