🔨 Refactor: rename page, from picgo

src/renderer/pages/RenamePage.vue

@@ -1,16 +1,33 @@
 <template>
   <div id="rename-page">
     <el-form
+      ref="formRef"
+      :model="form"
       @submit.prevent
     >
       <el-form-item
         :label="$T('FILE_RENAME')"
+        prop="fileName"
+        :rules="[
+          { required: true, message: 'file name is required', trigger: 'blur' }
+        ]"
       >
         <el-input
-          v-model="fileName"
+          v-model="form.fileName"
           size="small"
+          autofocus
           @keyup.enter="confirmName"
-        />
+        >
+          <template #suffix>
+            <el-icon
+              class="el-input__icon"
+              style="cursor: pointer;"
+              @click="form.fileName = ''"
+            >
+              <close />
+            </el-icon>
+          </template>
+        </el-input>
       </el-form-item>
     </el-form>
     <el-row>
@@ -35,36 +52,53 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { RENAME_FILE_NAME } from '#/events/constants'
+import { Close } from '@element-plus/icons-vue'
+import { GET_RENAME_FILE_NAME, RENAME_FILE_NAME } from '#/events/constants'
 import { sendToMain } from '@/utils/dataSender'
 import { T as $T } from '@/i18n/index'
 import {
   ipcRenderer,
   IpcRendererEvent
 } from 'electron'
-import { onBeforeUnmount, onBeforeMount, ref } from 'vue'
-const fileName = ref('')
-const originName = ref('')
+import { onBeforeUnmount, onBeforeMount, ref, reactive } from 'vue'
+import { useIPCOn } from '@/hooks/useIPC'
+import { FormInstance } from 'element-plus'
+
 const id = ref<string | null>(null)
+const formRef = ref<FormInstance>()
+
+const form = reactive({
+  fileName: '',
+  originName: ''
+})
+
+const handleFileName = (event: IpcRendererEvent, newName: string, _originName: string, _id: string) => {
+  form.fileName = newName
+  form.originName = _originName
+  id.value = _id
+}
+
+useIPCOn(RENAME_FILE_NAME, handleFileName)
+
 onBeforeMount(() => {
-  ipcRenderer.on(RENAME_FILE_NAME, (event: IpcRendererEvent, newName: string, _originName: string, _id: string) => {
-    fileName.value = newName
-    originName.value = _originName
-    id.value = _id
-  })
+  ipcRenderer.send(GET_RENAME_FILE_NAME)
 })
 
 function confirmName () {
-  sendToMain(`${RENAME_FILE_NAME}${id.value}`, fileName.value)
+  formRef.value?.validate((valid) => {
+    if (valid) {
+      sendToMain(`${RENAME_FILE_NAME}${id.value}`, form.fileName)
+    }
+  })
 }
 
 function cancel () {
   // if cancel, use origin file name
-  sendToMain(`${RENAME_FILE_NAME}${id.value}`, originName.value)
+  sendToMain(`${RENAME_FILE_NAME}${id.value}`, form.originName)
 }
 
 onBeforeUnmount(() => {
-  ipcRenderer.removeAllListeners('rename')
+  ipcRenderer.removeAllListeners(RENAME_FILE_NAME)
 })
 
 </script>