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

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 { QuestionFilled } from '@element-plus/icons-vue'
+import { InfoFilled } 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(
-  {
-    isShowThumbnail: {
-      type: Boolean,
-      required: true
-    },
-    item: {
-      type: Object,
-      required: true
-    },
-    localPath: {
-      type: String,
-      required: true
-    }
+const props = defineProps<{
+  isShowThumbnail: boolean
+  item: {
+    isImage: boolean
+    fileName: string
   }
-)
+  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(
-  {
-    isShowThumbnail: {
-      type: Boolean,
-      required: true
-    },
-    item: {
-      type: Object,
-      required: true
-    },
-    url: {
-      type: String,
-      required: true
-    },
-    config: {
-      type: Object,
-      required: true
-    }
+const props = defineProps<{
+  item: {
+    key: string
+    isImage: boolean
+    fileName: string | null | undefined
   }
-)
+  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>