🔨 Refactor: rename page, from picgo

src/main/apis/app/uploader/index.ts

@@ -13,7 +13,7 @@ import { IWindowList } from '#/types/enum'
 import util from 'util'
 import { IPicGo } from 'piclist'
 import { showNotification, getClipboardFilePath } from '~/main/utils/common'
-import { RENAME_FILE_NAME } from '~/universal/events/constants'
+import { GET_RENAME_FILE_NAME, RENAME_FILE_NAME } from '~/universal/events/constants'
 import logger from '@core/picgo/logger'
 import { T } from '~/main/i18n'
 import fse from 'fs-extra'
@@ -22,14 +22,6 @@ import { privacyManager } from '~/main/utils/privacyManager'
 import writeFile from 'write-file-atomic'
 import { CLIPBOARD_IMAGE_FOLDER } from '~/universal/utils/static'
 
-const waitForShow = (webcontent: WebContents) => {
-  return new Promise<void>((resolve) => {
-    webcontent.on('did-finish-load', () => {
-      resolve()
-    })
-  })
-}
-
 const waitForRename = (window: BrowserWindow, id: number): Promise<string|null> => {
   return new Promise((resolve) => {
     const windowId = window.id
@@ -85,8 +77,13 @@ class Uploader {
             }
             if (rename) {
               const window = windowManager.create(IWindowList.RENAME_WINDOW)!
-              await waitForShow(window.webContents)
+              logger.info('create rename window')
+              ipcMain.on(GET_RENAME_FILE_NAME, (evt) => {
+                if (evt.sender.id === window.webContents.id) {
+                  logger.info('rename window ready, wait for rename...')
                   window.webContents.send(RENAME_FILE_NAME, fileName, item.fileName, window.webContents.id)
+                }
+              })
               name = await waitForRename(window, window.webContents.id)
             }
             item.fileName = name || fileName
@@ -157,6 +154,8 @@ class Uploader {
         })
       }, 500)
       return false
+    } finally {
+      ipcMain.removeAllListeners(GET_RENAME_FILE_NAME)
     }
   }
 }

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'
+import { onBeforeUnmount, onBeforeMount, ref, reactive } from 'vue'
-const fileName = ref('')
+import { useIPCOn } from '@/hooks/useIPC'
-const originName = ref('')
+import { FormInstance } from 'element-plus'
+
 const id = ref<string | null>(null)
-onBeforeMount(() => {
+const formRef = ref<FormInstance>()
-  ipcRenderer.on(RENAME_FILE_NAME, (event: IpcRendererEvent, newName: string, _originName: string, _id: string) => {
+
-    fileName.value = newName
+const form = reactive({
-    originName.value = _originName
+  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.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>

src/universal/events/constants.ts

@@ -30,6 +30,7 @@ export const PICGO_TOGGLE_PLUGIN = 'PICGO_TOGGLE_PLUGIN'
 export const PASTE_TEXT = 'PASTE_TEXT'
 export const SET_MINI_WINDOW_POS = 'SET_MINI_WINDOW_POS'
 export const RENAME_FILE_NAME = 'RENAME_FILE_NAME'
+export const GET_RENAME_FILE_NAME = 'GET_RENAME_FILE_NAME'
 export const SHOW_MAIN_PAGE_QRCODE = 'SHOW_MAIN_PAGE_QRCODE'
 export const SHOW_MAIN_PAGE_DONATION = 'SHOW_MAIN_PAGE_DONATION'
 export const FORCE_UPDATE = 'FORCE_UPDATE'