🔨 Refactor(custom): refactored for new version of element

src/main.ts

@@ -14,9 +14,6 @@ import VueVideoPlayer from '@videojs-player/vue'
 // Electron 相关
 import { webFrame } from 'electron'
 
-// Axios
-import axios from 'axios'
-
 // Mixins
 import { mainMixin } from './renderer/utils/mainMixin'
 import { dragMixin } from '@/utils/mixin'
@@ -25,7 +22,7 @@ import { dragMixin } from '@/utils/mixin'
 import db from './renderer/utils/db'
 
 // 国际化
-import { i18nManager, T } from './renderer/i18n/index'
+import { T } from './renderer/i18n/index'
 
 // 工具函数
 import { getConfig, saveConfig, sendToMain, triggerRPC } from '@/utils/dataSender'
@@ -45,27 +42,8 @@ webFrame.setVisualZoomLevelLimits(1, 1)
 
 const app = createApp(App)
 
-app.config.globalProperties.$builtInPicBed = [
-  'smms',
-  'imgur',
-  'qiniu',
-  'tcyun',
-  'upyun',
-  'aliyun',
-  'github',
-  'webdavplist',
-  'local',
-  'sftpplist',
-  'telegraphplist',
-  'piclist',
-  'lskyplist',
-  'aws-s3-plist'
-]
-
 app.config.globalProperties.$$db = db
-app.config.globalProperties.$http = axios
 app.config.globalProperties.$T = T
-app.config.globalProperties.$i18n = i18nManager
 app.config.globalProperties.getConfig = getConfig
 app.config.globalProperties.triggerRPC = triggerRPC
 app.config.globalProperties.saveConfig = saveConfig

src/renderer/App.vue

@@ -5,19 +5,10 @@
 </template>
 
 <script lang="ts" setup>
-// 状态管理
 import { useStore } from '@/hooks/useStore'
-
-// Vue 生命周期钩子
 import { onBeforeMount, onMounted, onUnmounted } from 'vue'
-
-// 数据发送工具函数
 import { getConfig } from './utils/dataSender'
-
-// 类型声明
 import type { IConfig } from 'piclist'
-
-// 其他工具
 import bus from './utils/bus'
 import { FORCE_UPDATE } from '~/universal/events/constants'
 import { useATagClick } from './hooks/useATagClick'

src/renderer/components/ConfigForm.vue

@@ -46,7 +46,7 @@
                   />
                 </template>
                 <el-icon class="ml-[4px] cursor-pointer hover:text-blue">
-                  <QuestionFilled />
+                  <InfoFilled />
                 </el-icon>
               </el-tooltip>
             </template>
@@ -105,8 +105,7 @@ import { cloneDeep, union } from 'lodash'
 import { getConfig } from '@/utils/dataSender'
 import { useRoute } from 'vue-router'
 import type { FormInstance } from 'element-plus'
-import { T as $T } from '@/i18n'
+import { InfoFilled } from '@element-plus/icons-vue'
-import { QuestionFilled } from '@element-plus/icons-vue'
 import { marked } from 'marked'
 
 interface IProps {
@@ -141,7 +140,6 @@ async function validate (): Promise<IStringKeyMap | false> {
         resolve(ruleForm)
       } else {
         resolve(false)
-        return false
       }
     })
   })

src/renderer/components/ConfigFormForPlugin.vue

@@ -114,7 +114,6 @@ async function validate (): Promise<IStringKeyMap | false> {
         resolve(ruleForm)
       } else {
         resolve(false)
-        return false
       }
     })
   })

src/renderer/components/ImageLocal.vue

@@ -30,22 +30,14 @@ import mime from 'mime-types'
 import path from 'path'
 
 const base64Image = ref('')
-const props = defineProps(
+const props = defineProps<{
-  {
+  isShowThumbnail: boolean
-    isShowThumbnail: {
+  item: {
-      type: Boolean,
+    isImage: boolean
-      required: true
+    fileName: string
-    },
-    item: {
-      type: Object,
-      required: true
-    },
-    localPath: {
-      type: String,
-      required: true
-    }
   }
-)
+  localPath: string
+}>()
 
 const createBase64Image = async () => {
   const filePath = path.normalize(props.localPath)

src/renderer/components/ImageWebdav.vue

@@ -29,26 +29,16 @@ import { formatEndpoint } from '~/main/manage/utils/common'
 const base64Url = ref('')
 const success = ref(false)
 
-const props = defineProps(
+const props = defineProps<{
-  {
+  item: {
-    isShowThumbnail: {
+    key: string
-      type: Boolean,
+    isImage: boolean
-      required: true
+    fileName: string | null | undefined
-    },
-    item: {
-      type: Object,
-      required: true
-    },
-    url: {
-      type: String,
-      required: true
-    },
-    config: {
-      type: Object,
-      required: true
-    }
   }
-)
+  url: string
+  config: any
+  isShowThumbnail: boolean
+}>()
 
 const imageSource = computed(() => {
   return (props.isShowThumbnail && props.item.isImage && success.value)
@@ -58,7 +48,7 @@ const imageSource = computed(() => {
 
 const iconPath = computed(() => require(`../manage/pages/assets/icons/${getFileIconPath(props.item.fileName ?? '')}`))
 
-async function getheaderOfWebdav (key: string) {
+async function getWebdavHeader (key: string) {
   let headers = {} as any
   if (props.config.authType === 'digest') {
     const authHeader = await getAuthHeader(
@@ -81,7 +71,7 @@ async function getheaderOfWebdav (key: string) {
 
 const fetchImage = async () => {
   try {
-    const headers = await getheaderOfWebdav(props.item.key)
+    const headers = await getWebdavHeader(props.item.key)
     const res = await fetch(props.url, { method: 'GET', headers })
     if (res.status >= 200 && res.status < 300) {
       const blob = await res.blob()

src/renderer/components/ImageWebdavTsx.tsx

@@ -36,7 +36,7 @@ export default defineComponent({
     })
     const iconPath = computed(() => require(`../manage/pages/assets/icons/${getFileIconPath(props.item.fileName ?? '')}`))
 
-    async function getheaderOfWebdav (key: string) {
+    async function getWebdavHeader (key: string) {
       let headers = {} as any
       if (props.config.authType === 'digest') {
         const authHeader = await getAuthHeader(
@@ -59,7 +59,7 @@ export default defineComponent({
 
     const fetchImage = async () => {
       try {
-        const headers = await getheaderOfWebdav(props.item.key)
+        const headers = await getWebdavHeader(props.item.key)
         const res = await fetch(props.url, { method: 'GET', headers })
         if (res.status >= 200 && res.status < 300) {
           const blob = await res.blob()

src/renderer/components/ToolboxHandler.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="toolbox-handler">
     <ElButton
-      type="text"
+      type="primary"
+      :link="true"
       @click="() => props.handler(value)"
     >
       {{ props.handlerText }}

src/renderer/components/settings/CheckboxFormItem.vue

@@ -1,66 +0,0 @@
-<template>
-  <el-form-item>
-    <template #label>
-      <el-row align="middle">
-        {{ props.settingText }}
-        <template v-if="props.tooltips">
-          <el-tooltip
-            class="item"
-            effect="dark"
-            :content="props.tooltips"
-            placement="right"
-            :persistent="false"
-            teleported
-          >
-            <el-icon style="margin-left: 4px">
-              <QuestionFilled />
-            </el-icon>
-          </el-tooltip>
-        </template>
-      </el-row>
-    </template>
-    <el-switch
-      v-model="value"
-      :active-text="$T('SETTINGS_OPEN')"
-      :inactive-text="$T('SETTINGS_CLOSE')"
-      @change="handleChange"
-    />
-  </el-form-item>
-</template>
-<script lang="ts" setup>
-import { T as $T } from '@/i18n'
-import { saveConfig } from '@/utils/dataSender'
-import { ref, watch } from 'vue'
-import { QuestionFilled } from '@element-plus/icons-vue'
-
-interface IProps {
-  tooltips?: string
-  settingProps: string
-  settingText: string
-  defaultValue: boolean
-}
-
-const props = defineProps<IProps>()
-
-// to fix v-model blank bug
-watch(() => props.defaultValue, (v) => {
-  value.value = v
-})
-
-const value = ref<boolean>(props.defaultValue)
-const emit = defineEmits(['change'])
-
-const handleChange = (val: ICheckBoxValueType) => {
-  saveConfig(props.settingProps, val)
-  emit('change', val)
-}
-
-</script>
-<script lang="ts">
-export default {
-  name: 'CheckboxFormItem'
-}
-
-</script>
-<style lang='stylus'>
-</style>

src/renderer/i18n/index.ts

@@ -10,14 +10,14 @@ export class I18nManager {
 
   #getLanguageList () {
     ipcRenderer.send(GET_LANGUAGE_LIST)
-    ipcRenderer.once(GET_LANGUAGE_LIST, (event, list: II18nItem[]) => {
+    ipcRenderer.once(GET_LANGUAGE_LIST, (_, list: II18nItem[]) => {
       this.#i18nFileList = list
     })
   }
 
   #getCurrentLanguage () {
     ipcRenderer.send(GET_CURRENT_LANGUAGE)
-    ipcRenderer.once(GET_CURRENT_LANGUAGE, (event, lang: string, locales: ILocales) => {
+    ipcRenderer.once(GET_CURRENT_LANGUAGE, (_, lang: string, locales: ILocales) => {
       this.#setLocales(lang, locales)
       bus.emit(FORCE_UPDATE)
     })
@@ -36,7 +36,7 @@ export class I18nManager {
   constructor () {
     this.#getCurrentLanguage()
     this.#getLanguageList()
-    ipcRenderer.on(SET_CURRENT_LANGUAGE, (event, lang: string, locales: ILocales) => {
+    ipcRenderer.on(SET_CURRENT_LANGUAGE, (_, lang: string, locales: ILocales) => {
       this.#setLocales(lang, locales)
       bus.emit(FORCE_UPDATE)
     })

src/renderer/manage/components/DynamicSwitch.vue

@@ -35,12 +35,12 @@
 import { InfoFilled } from '@element-plus/icons-vue'
 
 defineProps<{
-  tooltip: string,
+  tooltip?: string,
   activeText?: string,
   inactiveText?: string,
   segments?: { text: string, style: string }[],
 }>()
 
-const value = defineModel()
+const value = defineModel<boolean>()
 
 </script>

src/renderer/manage/pages/bucketPage.vue

@@ -50,7 +50,10 @@
         style="display: flex;"
         @click="showUploadDialog"
       >
-        <el-button type="text">
+        <el-button
+          type="primary"
+          :link="true"
+        >
           <el-tooltip
             class="item"
             effect="dark"
@@ -70,7 +73,8 @@
       </div>
       <div>
         <el-button
-          type="text"
+          type="primary"
+          :link="true"
           @click="showUrlDialog"
         >
           <el-tooltip
@@ -95,7 +99,8 @@
         v-if="isShowCreateNewFolder"
       >
         <el-button
-          type="text"
+          type="primary"
+          :link="true"
           @click="handleCreateFolder"
         >
           <el-tooltip
@@ -119,7 +124,10 @@
       <div
         @click="showDownloadDialog"
       >
-        <el-button type="text">
+        <el-button
+          type="primary"
+          :link="true"
+        >
           <el-tooltip
             class="item"
             effect="dark"
@@ -142,7 +150,10 @@
         v-if="isShowRenameFileIcon"
         @click="handleBatchRenameFile"
       >
-        <el-button type="text">
+        <el-button
+          type="primary"
+          :link="true"
+        >
           <el-tooltip
             class="item"
             effect="dark"
@@ -162,7 +173,10 @@
         </el-button>
       </div>
       <div>
-        <el-button type="text">
+        <el-button
+          type="primary"
+          :link="true"
+        >
           <el-tooltip
             class="item"
             effect="dark"
@@ -177,7 +191,7 @@
               <el-icon
                 class="icon"
                 size="25px"
-                :color="selectedItems.length > 0 ? 'red' : 'gray'"
+                :color="selectedItems.length > 0 ? '#409EFF' : 'gray'"
                 style="margin-left: 10px;"
                 @click="handleBatchCopyLink(manageStore.config.settings.pasteFormat)"
               >
@@ -207,7 +221,10 @@
         </el-button>
       </div>
       <div>
-        <el-button type="text">
+        <el-button
+          type="primary"
+          :link="true"
+        >
           <el-tooltip
             class="item"
             effect="dark"
@@ -219,7 +236,7 @@
             <el-icon
               class="icon"
               size="25px"
-              :color="selectedItems.length > 0 ? 'red' : 'gray'"
+              :color="selectedItems.length > 0 ? '#409EFF' : 'gray'"
               style="margin-left: 10px;"
               @click="handleBatchCopyInfo"
             >
@@ -230,7 +247,8 @@
       </div>
       <div>
         <el-button
-          type="text"
+          type="primary"
+          :link="true"
           @click="forceRefreshFileList"
         >
           <el-tooltip

src/renderer/manage/pages/manageSetting.vue

@@ -186,7 +186,7 @@
               <el-radio
                 v-for="item in pasteFormatList"
                 :key="item"
-                :label="item"
+                :value="item"
               >
                 {{ $T(`MANAGE_SETTING_CHOOSE_COPY_FORMAT_${item.toUpperCase().replace(/-/g, '_')}` as any) }}
               </el-radio>

src/renderer/pages/Gallery.vue

@@ -24,7 +24,8 @@
           @change="handleDeleteCloudFile"
         />
         <el-button
-          type="text"
+          type="primary"
+          :link="true"
           @click="refreshPage"
         >
           <el-tooltip

src/renderer/pages/PicGoSetting.vue

@@ -556,7 +556,7 @@
                         teleported
                       >
                         <el-icon style="margin-left: 4px">
-                          <QuestionFilled />
+                          <InfoFilled />
                         </el-icon>
                       </el-tooltip>
                     </el-row>
@@ -590,6 +590,7 @@
                       v-for="item in picBed"
                       :key="item.name"
                       :label="item.name"
+                      :value="item.name"
                     />
                   </el-checkbox-group>
                 </el-form-item>
@@ -1480,10 +1481,10 @@
           :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE')"
         >
           <el-radio-group v-model="waterMarkForm.watermarkType">
-            <el-radio label="text">
+            <el-radio value="text">
               {{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_TEXT') }}
             </el-radio>
-            <el-radio label="image">
+            <el-radio value="image">
               {{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_IMAGE') }}
             </el-radio>
           </el-radio-group>
@@ -1554,7 +1555,7 @@
             <el-radio
               v-for="item in waterMarkPositionMap"
               :key="item[0]"
-              :label="item[0]"
+              :value="item[0]"
             >
               {{ item[1] }}
             </el-radio>
@@ -2230,8 +2231,6 @@ function confirmCustomLink () {
       saveConfig(configPaths.settings.customLink, customLink.value)
       customLinkVisible.value = false
       sendToMain('updateCustomLink')
-    } else {
-      return false
     }
   })
 }

src/renderer/pages/Plugin.vue

@@ -534,7 +534,6 @@ async function handleConfirmConfig () {
 }
 
 function _getSearchResult (val: string) {
-  // this.$http.get(`https://api.npms.io/v2/search?q=${val}`)
   axios.get(`https://registry.npmjs.com/-/v1/search?text=${val}`)
     .then((res: INPMSearchResult) => {
       pluginList.value = res.data.objects

src/renderer/pages/ShortKey.vue

@@ -58,7 +58,8 @@
                   :class="{
                     disabled: scope.row.enable
                   }"
-                  type="text"
+                  type="info"
+                  :link="true"
                   @click="toggleEnable(scope.row)"
                 >
                   {{ scope.row.enable ? $T('SHORTCUT_DISABLE') : $T('SHORTCUT_ENABLE') }}
@@ -66,7 +67,8 @@
                 <el-button
                   class="edit"
                   size="small"
-                  type="text"
+                  type="info"
+                  :link="true"
                   @click="openKeyBindingDialog(scope.row, scope.$index)"
                 >
                   {{ $T('SHORTCUT_EDIT') }}

src/renderer/pages/Upload.vue

@@ -82,27 +82,13 @@
               @change="handlePasteStyleChange"
             >
               <el-radio-button
-                label="markdown"
+                v-for="(item, key) in pasteFormatList"
-                title="![alt](url)"
+                :key="key"
+                :value="key"
+                :title="item"
               >
-                Markdown
+                {{ key }}
               </el-radio-button>
-              <el-radio-button
-                label="HTML"
-                title="<img src='url'/>"
-              />
-              <el-radio-button
-                label="URL"
-                title="http://test.com/test.png"
-              />
-              <el-radio-button
-                label="UBB"
-                title="[img]url[/img]"
-              />
-              <el-radio-button
-                label="Custom"
-                :title="customLink"
-              />
             </el-radio-group>
             <el-radio-group
               v-model="useShortUrl"
@@ -110,13 +96,13 @@
               @change="handleUseShortUrlChange"
             >
               <el-radio-button
-                :label="true"
+                :value="true"
                 style="border-radius: 5px"
               >
                 {{ $T('UPLOAD_SHORT_URL') }}
               </el-radio-button>
               <el-radio-button
-                :label="false"
+                :value="false"
                 style="border-radius: 5px"
               >
                 {{ $T('UPLOAD_NORMAL_URL') }}
@@ -180,10 +166,10 @@
           :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE')"
         >
           <el-radio-group v-model="waterMarkForm.watermarkType">
-            <el-radio label="text">
+            <el-radio value="text">
               {{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_TEXT') }}
             </el-radio>
-            <el-radio label="image">
+            <el-radio value="image">
               {{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_IMAGE') }}
             </el-radio>
           </el-radio-group>
@@ -254,7 +240,7 @@
             <el-radio
               v-for="item in waterMarkPositionMap"
               :key="item[0]"
-              :label="item[0]"
+              :value="item[0]"
             >
               {{ item[1] }}
             </el-radio>
@@ -473,6 +459,22 @@ const $router = useRouter()
 
 const imageProcessDialogVisible = ref(false)
 const useShortUrl = ref(false)
+const dragover = ref(false)
+const progress = ref(0)
+const showProgress = ref(false)
+const showError = ref(false)
+const pasteStyle = ref('')
+const picBed = ref<IPicBedType[]>([])
+const picBedName = ref('')
+const picBedConfigName = ref('')
+
+const pasteFormatList = ref({
+  [IPasteStyle.MARKDOWN]: '![alt](url)',
+  [IPasteStyle.HTML]: '<img src="url"/>',
+  [IPasteStyle.URL]: 'http://test.com/test.png',
+  [IPasteStyle.UBB]: '[img]url[/img]',
+  [IPasteStyle.CUSTOM]: ''
+})
 
 const waterMarkPositionMap = new Map([
   ['north', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_TOP')],
@@ -519,6 +521,8 @@ const compressForm = reactive<any>({
   isFlip: false,
   isFlop: false
 })
+const waterMarkFormKeys = Object.keys(waterMarkForm)
+const compressFormKeys = Object.keys(compressForm)
 
 const formatConvertObj = ref('{}')
 
@@ -548,20 +552,9 @@ async function initData () {
   const compress = await getConfig<IBuildInCompressOptions>(configPaths.buildIn.compress)
   const watermark = await getConfig<IBuildInWaterMarkOptions>(configPaths.buildIn.watermark)
   if (compress) {
-    compressForm.quality = compress.quality ?? 100
+    compressFormKeys.forEach((key) => {
-    compressForm.isConvert = compress.isConvert ?? false
+      compressForm[key] = compress[key] ?? compressForm[key]
-    compressForm.convertFormat = compress.convertFormat ?? 'jpg'
+    })
-    compressForm.isReSize = compress.isReSize ?? false
-    compressForm.reSizeWidth = compress.reSizeWidth ?? 500
-    compressForm.reSizeHeight = compress.reSizeHeight ?? 500
-    compressForm.skipReSizeOfSmallImg = compress.skipReSizeOfSmallImg ?? false
-    compressForm.isReSizeByPercent = compress.isReSizeByPercent ?? false
-    compressForm.reSizePercent = compress.reSizePercent ?? 50
-    compressForm.isRotate = compress.isRotate ?? false
-    compressForm.rotateDegree = compress.rotateDegree ?? 0
-    compressForm.isRemoveExif = compress.isRemoveExif ?? false
-    compressForm.isFlip = compress.isFlip ?? false
-    compressForm.isFlop = compress.isFlop ?? false
     try {
       if (typeof compress.formatConvertObj === 'object') {
         formatConvertObj.value = JSON.stringify(compress.formatConvertObj)
@@ -573,29 +566,13 @@ async function initData () {
     }
   }
   if (watermark) {
-    waterMarkForm.isAddWatermark = watermark.isAddWatermark ?? false
+    waterMarkFormKeys.forEach((key) => {
-    waterMarkForm.watermarkType = watermark.watermarkType ?? 'text'
+      waterMarkForm[key] = watermark[key as keyof IBuildInWaterMarkOptions] ?? waterMarkForm[key]
-    waterMarkForm.isFullScreenWatermark = watermark.isFullScreenWatermark ?? false
+    })
-    waterMarkForm.watermarkDegree = watermark.watermarkDegree ?? 0
+    waterMarkForm.watermarkColor = watermark.watermarkColor === '' ? '#CCCCCC73' : watermark.watermarkColor
-    waterMarkForm.watermarkText = watermark.watermarkText ?? ''
-    waterMarkForm.watermarkFontPath = watermark.watermarkFontPath ?? ''
-    waterMarkForm.watermarkScaleRatio = watermark.watermarkScaleRatio ?? 0.15
-    waterMarkForm.watermarkColor = watermark.watermarkColor === undefined || watermark.watermarkColor === '' ? '#CCCCCC73' : watermark.watermarkColor
-    waterMarkForm.watermarkImagePath = watermark.watermarkImagePath ?? ''
-    waterMarkForm.watermarkPosition = watermark.watermarkPosition ?? 'southeast'
   }
 }
 
-const dragover = ref(false)
-const progress = ref(0)
-const showProgress = ref(false)
-const showError = ref(false)
-const pasteStyle = ref('')
-const picBed = ref<IPicBedType[]>([])
-const picBedName = ref('')
-const customLink = ref('')
-const picBedConfigName = ref('')
-
 onBeforeMount(() => {
   ipcRenderer.on('uploadProgress', (_event: IpcRendererEvent, _progress: number) => {
     if (_progress !== -1) {
@@ -723,7 +700,7 @@ function ipcSendFiles (files: FileList) {
 
 async function getPasteStyle () {
   pasteStyle.value = await getConfig(configPaths.settings.pasteStyle) || IPasteStyle.MARKDOWN
-  customLink.value = await getConfig(configPaths.settings.customLink) || '![$fileName]($url)'
+  pasteFormatList.value.Custom = await getConfig(configPaths.settings.customLink) || '![$fileName]($url)'
 }
 
 async function getUseShortUrl () {
@@ -736,9 +713,9 @@ async function handleUseShortUrlChange () {
   })
 }
 
-function handlePasteStyleChange (val: string | number | boolean) {
+function handlePasteStyleChange (val: string | number | boolean | undefined) {
   saveConfig({
-    [configPaths.settings.pasteStyle]: val
+    [configPaths.settings.pasteStyle]: val || IPasteStyle.MARKDOWN
   })
 }
 

src/renderer/utils/mainMixin.ts

@@ -1,13 +1,6 @@
-// Vue 组件选项
 import { ComponentOptions } from 'vue'
-
-// 事件常量
 import { FORCE_UPDATE, GET_PICBEDS } from '~/universal/events/constants'
-
-// 事件总线
 import bus from '~/renderer/utils/bus'
-
-// Electron 相关
 import { ipcRenderer } from 'electron'
 
 export const mainMixin: ComponentOptions = {

src/universal/types/extra-vue.d.ts

@@ -17,11 +17,8 @@ declare module 'vue/types/vue' {
 
 declare module 'vue' {
   interface ComponentCustomProperties {
-    $http: typeof axios
-    $builtInPicBed: string[]
     $$db: IGalleryDB
     $T: typeof import('~/renderer/i18n/index').T
-    $i18n: import('~/renderer/i18n/index').I18nManager
     saveConfig(data: IObj | string, value?: any): void
     getConfig<T>(key?: string): Promise<T | undefined>
     setDefaultPicBed(picBed: string): void