🔨 Refactor: upgrade vue2 -> vue3

src/renderer/components/ChoosePicBed.vue

@@ -1,37 +0,0 @@
-<template>
-  <div id="choose-pic-bed">
-    <span>{{ $T('CHOOSE_YOUR_DEFAULT_PICBED', { d: label }) }}</span>
-    <el-switch
-      v-model="value"
-      @change="choosePicBed"
-    >
-    </el-switch>
-  </div>
-</template>
-<script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator'
-@Component({
-  name: 'choose-pic-bed'
-})
-export default class extends Vue {
-  value = false
-  @Prop() type!: string
-  @Prop() label!: string
-  async created () {
-    const current = await this.getConfig<string>('picBed.current')
-    if (this.type === current) {
-      this.value = true
-    }
-  }
-
-  choosePicBed () {
-    this.saveConfig({
-      'picBed.current': this.type,
-      'picBed.uploader': this.type
-    })
-    this.$emit('update:choosed', this.type)
-  }
-}
-</script>
-<style lang='stylus'>
-</style>

src/renderer/components/ConfigForm.vue

@@ -1,11 +1,14 @@
 <template>
-  <div id="config-form">
+  <div
+    id="config-form"
+    :class="props.colorMode === 'white' ? 'white' : ''"
+  >
     <el-form
-      label-position="right"
-      label-width="120px"
+      ref="$form"
+      label-position="left"
+      label-width="50%"
       :model="ruleForm"
-      ref="form"
-      size="mini"
+      size="small"
     >
       <el-form-item
         :label="$T('UPLOADER_CONFIG_NAME')"
@@ -13,25 +16,25 @@
         prop="_configName"
       >
         <el-input
-          type="input"
           v-model="ruleForm._configName"
+          type="input"
           :placeholder="$T('UPLOADER_CONFIG_PLACEHOLDER')"
-        ></el-input>
+        />
       </el-form-item>
       <!-- dynamic config -->
       <el-form-item
         v-for="(item, index) in configList"
+        :key="item.name + index"
         :label="item.alias || item.name"
         :required="item.required"
         :prop="item.name"
-        :key="item.name + index"
       >
         <el-input
           v-if="item.type === 'input' || item.type === 'password'"
-          :type="item.type === 'password' ? 'password' : 'input'"
           v-model="ruleForm[item.name]"
+          :type="item.type === 'password' ? 'password' : 'input'"
           :placeholder="item.message || item.name"
-        ></el-input>
+        />
         <el-select
           v-else-if="item.type === 'list' && item.choices"
           v-model="ruleForm[item.name]"
@@ -39,10 +42,10 @@
         >
           <el-option
             v-for="choice in item.choices"
-            :label="choice.name || choice.value || choice"
             :key="choice.name || choice.value || choice"
+            :label="choice.name || choice.value || choice"
             :value="choice.value || choice"
-          ></el-option>
+          />
         </el-select>
         <el-select
           v-else-if="item.type === 'checkbox' && item.choices"
@@ -53,112 +56,120 @@
         >
           <el-option
             v-for="choice in item.choices"
-            :label="choice.name || choice.value || choice"
             :key="choice.value || choice"
+            :label="choice.name || choice.value || choice"
             :value="choice.value || choice"
-          ></el-option>
+          />
         </el-select>
         <el-switch
           v-else-if="item.type === 'confirm'"
           v-model="ruleForm[item.name]"
           active-text="yes"
           inactive-text="no"
-        >
-        </el-switch>
+        />
       </el-form-item>
-      <slot></slot>
+      <slot />
     </el-form>
   </div>
 </template>
-<script lang="ts">
-import {
-  Component,
-  Vue,
-  Prop,
-  Watch
-} from 'vue-property-decorator'
+<script lang="ts" setup>
+import { reactive, ref, watch, defineExpose, toRefs } from 'vue'
 import { cloneDeep, union } from 'lodash'
+import { getConfig } from '@/utils/dataSender'
+import { useRoute } from 'vue-router'
+import type { FormInstance } from 'element-plus'
 
-@Component({
-  name: 'config-form'
+interface IProps {
+  config: any[]
+  type: 'uploader' | 'transformer' | 'plugin'
+  id: string
+  colorMode?: 'white' | 'dark'
+}
+
+const props = defineProps<IProps>()
+const $route = useRoute()
+const $form = ref<FormInstance>()
+
+const configList = ref<IPicGoPluginConfig[]>([])
+const ruleForm = reactive<IStringKeyMap>({})
+
+watch(toRefs(props.config), (val: IPicGoPluginConfig[]) => {
+  handleConfigChange(val)
+}, {
+  deep: true,
+  immediate: true
 })
-export default class extends Vue {
-  @Prop() private config!: any[]
-  @Prop() readonly type!: 'uploader' | 'transformer' | 'plugin'
-  @Prop() readonly id!: string
-  configList: IPicGoPluginConfig[] = []
-  ruleForm: IStringKeyMap = {}
-  @Watch('config', {
-    deep: true,
-    immediate: true
-  })
-  handleConfigChange (val: any) {
-    this.handleConfig(val)
-  }
 
-  async validate () {
-    return new Promise((resolve) => {
-      // @ts-ignore
-      this.$refs.form.validate((valid: boolean) => {
-        if (valid) {
-          resolve(this.ruleForm)
-        } else {
-          resolve(false)
-          return false
-        }
-      })
+function handleConfigChange (val: any) {
+  handleConfig(val)
+}
+
+async function validate (): Promise<IStringKeyMap | false> {
+  return new Promise((resolve) => {
+    $form.value?.validate((valid: boolean) => {
+      if (valid) {
+        resolve(ruleForm)
+      } else {
+        resolve(false)
+        return false
+      }
     })
-  }
+  })
+}
 
-  getConfigType () {
-    switch (this.type) {
-      case 'plugin': {
-        return this.id
-      }
-      case 'uploader': {
-        return `picBed.${this.id}`
-      }
-      case 'transformer': {
-        return `transformer.${this.id}`
-      }
-      default:
-        return 'unknown'
+function getConfigType () {
+  switch (props.type) {
+    case 'plugin': {
+      return props.id
     }
-  }
-
-  async handleConfig (val: IPicGoPluginConfig[]) {
-    const config = await this.getCurConfigFormData()
-    const configId = this.$route.params.configId
-    this.ruleForm = Object.assign({}, config)
-    if (val.length > 0) {
-      this.configList = cloneDeep(val).map((item) => {
-        if (!configId) return item
-        let defaultValue = item.default !== undefined
-          ? item.default
-          : item.type === 'checkbox'
-            ? []
-            : null
-        if (item.type === 'checkbox') {
-          const defaults = item.choices?.filter((i: any) => {
-            return i.checked
-          }).map((i: any) => i.value) || []
-          defaultValue = union(defaultValue, defaults)
-        }
-        if (config && config[item.name] !== undefined) {
-          defaultValue = config[item.name]
-        }
-        this.$set(this.ruleForm, item.name, defaultValue)
-        return item
-      })
+    case 'uploader': {
+      return `picBed.${props.id}`
     }
-  }
-
-  async getCurConfigFormData () {
-    const configId = this.$route.params.configId
-    const curTypeConfigList = await this.getConfig<IStringKeyMap[]>(`uploader.${this.id}.configList`) || []
-    return curTypeConfigList.find(i => i._id === configId) || {}
+    case 'transformer': {
+      return `transformer.${props.id}`
+    }
+    default:
+      return 'unknown'
   }
 }
+
+async function handleConfig (val: IPicGoPluginConfig[]) {
+  const config = await getCurConfigFormData()
+  const configId = $route.params.configId
+  Object.assign(ruleForm, config)
+  if (val.length > 0) {
+    configList.value = cloneDeep(val).map((item) => {
+      if (!configId) return item
+      let defaultValue = item.default !== undefined
+        ? item.default
+        : item.type === 'checkbox'
+          ? []
+          : null
+      if (item.type === 'checkbox') {
+        const defaults = item.choices?.filter((i: any) => {
+          return i.checked
+        }).map((i: any) => i.value) || []
+        defaultValue = union(defaultValue, defaults)
+      }
+      if (config && config[item.name] !== undefined) {
+        defaultValue = config[item.name]
+      }
+      ruleForm[item.name] = defaultValue
+      return item
+    })
+  }
+}
+
+async function getCurConfigFormData () {
+  const configId = $route.params.configId
+  const curTypeConfigList = await getConfig<IStringKeyMap[]>(`uploader.${props.id}.configList`) || []
+  return curTypeConfigList.find(i => i._id === configId) || {}
+}
+
+defineExpose({
+  validate,
+  getConfigType
+})
 </script>
 <style lang='stylus'>
 #config-form
@@ -166,15 +177,25 @@ export default class extends Vue {
     label
       line-height 22px
       padding-bottom 0
+    &-item
+      display: flex
+      justify-content space-between
+      border-bottom 1px solid darken(#eee, 50%)
+      padding-bottom 16px
+      &:last-child
+        border-bottom none
+      &__content
+        justify-content flex-end
     .el-button-group
       width 100%
       .el-button
         width 50%
-    .el-input__inner
-      border-radius 19px
     .el-radio-group
       margin-left 25px
     .el-switch__label
       &.is-active
         color #409EFF
+  &.white
+    .el-form-item
+      border-bottom 1px solid #ddd
 </style>

src/renderer/components/InputBoxDialog.vue

@@ -1,69 +1,84 @@
 <template>
   <el-dialog
+    v-model="showInputBoxVisible"
     :title="inputBoxOptions.title || $T('INPUT')"
-    :visible.sync="showInputBoxVisible"
     :modal-append-to-body="false"
   >
     <el-input
       v-model="inputBoxValue"
-      :placeholder="inputBoxOptions.placeholder"></el-input>
-    <span slot="footer">
-      <el-button @click="handleInputBoxCancel" round>{{ $T('CANCEL') }}</el-button>
-      <el-button type="primary" @click="handleInputBoxConfirm" round>{{ $T('CONFIRM') }}</el-button>
-    </span>
+      :placeholder="inputBoxOptions.placeholder"
+    />
+    <template #footer>
+      <el-button
+        round
+        @click="handleInputBoxCancel"
+      >
+        {{ $T('CANCEL') }}
+      </el-button>
+      <el-button
+        type="primary"
+        round
+        @click="handleInputBoxConfirm"
+      >
+        {{ $T('CONFIRM') }}
+      </el-button>
+    </template>
   </el-dialog>
 </template>
-<script lang="ts">
-import { Component, Vue } from 'vue-property-decorator'
+<script lang="ts" setup>
+import { ref, reactive, onBeforeUnmount, onBeforeMount } from 'vue'
 import { ipcRenderer, IpcRendererEvent } from 'electron'
 import {
   SHOW_INPUT_BOX,
   SHOW_INPUT_BOX_RESPONSE
 } from '~/universal/events/constants'
-@Component({
-  name: 'input-box-dialog'
+import $bus from '@/utils/bus'
+import { sendToMain } from '@/utils/dataSender'
+const inputBoxValue = ref('')
+const showInputBoxVisible = ref(false)
+const inputBoxOptions = reactive({
+  title: '',
+  placeholder: ''
 })
-export default class extends Vue {
-  inputBoxValue = ''
-  showInputBoxVisible = false
-  inputBoxOptions = {
-    title: '',
-    placeholder: ''
-  }
 
-  created () {
-    ipcRenderer.on(SHOW_INPUT_BOX, this.ipcEventHandler)
-    this.$bus.$on(SHOW_INPUT_BOX, this.initInputBoxValue)
-  }
+onBeforeMount(() => {
+  ipcRenderer.on(SHOW_INPUT_BOX, ipcEventHandler)
+  $bus.on(SHOW_INPUT_BOX, initInputBoxValue)
+})
 
-  ipcEventHandler (evt: IpcRendererEvent, options: IShowInputBoxOption) {
-    this.initInputBoxValue(options)
-  }
+function ipcEventHandler (evt: IpcRendererEvent, options: IShowInputBoxOption) {
+  initInputBoxValue(options)
+}
 
-  initInputBoxValue (options: IShowInputBoxOption) {
-    this.inputBoxValue = options.value || ''
-    this.inputBoxOptions.title = options.title || ''
-    this.inputBoxOptions.placeholder = options.placeholder || ''
-    this.showInputBoxVisible = true
-  }
+function initInputBoxValue (options: IShowInputBoxOption) {
+  inputBoxValue.value = options.value || ''
+  inputBoxOptions.title = options.title || ''
+  inputBoxOptions.placeholder = options.placeholder || ''
+  showInputBoxVisible.value = true
+}
 
-  handleInputBoxCancel () {
-    // TODO: RPCServer
-    this.showInputBoxVisible = false
-    ipcRenderer.send(SHOW_INPUT_BOX, '')
-    this.$bus.$emit(SHOW_INPUT_BOX_RESPONSE, '')
-  }
+function handleInputBoxCancel () {
+  // TODO: RPCServer
+  showInputBoxVisible.value = false
+  sendToMain(SHOW_INPUT_BOX, '')
+  $bus.emit(SHOW_INPUT_BOX_RESPONSE, '')
+}
 
-  handleInputBoxConfirm () {
-    this.showInputBoxVisible = false
-    ipcRenderer.send(SHOW_INPUT_BOX, this.inputBoxValue)
-    this.$bus.$emit(SHOW_INPUT_BOX_RESPONSE, this.inputBoxValue)
-  }
+function handleInputBoxConfirm () {
+  showInputBoxVisible.value = false
+  sendToMain(SHOW_INPUT_BOX, inputBoxValue.value)
+  $bus.emit(SHOW_INPUT_BOX_RESPONSE, inputBoxValue.value)
+}
 
-  beforeDestroy () {
-    ipcRenderer.removeListener(SHOW_INPUT_BOX, this.ipcEventHandler)
-    this.$bus.$off(SHOW_INPUT_BOX)
-  }
+onBeforeUnmount(() => {
+  ipcRenderer.removeListener(SHOW_INPUT_BOX, ipcEventHandler)
+  $bus.off(SHOW_INPUT_BOX)
+})
+
+</script>
+<script lang="ts">
+export default {
+  name: 'InputBoxDialog'
 }
 </script>
 <style lang='stylus'>