🐛 Fix: rename page bug

ISSUES CLOSED: #1130

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

@@ -13,7 +13,7 @@ import { IWindowList } from '#/types/enum'
 import util from 'util'
 import { IPicGo } from 'picgo'
 import { showNotification, calcDurationRange, getClipboardFilePath } from '~/main/utils/common'
-import { RENAME_FILE_NAME, TALKING_DATA_EVENT } from '~/universal/events/constants'
+import { GET_RENAME_FILE_NAME, RENAME_FILE_NAME, TALKING_DATA_EVENT } 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
@@ -99,8 +91,13 @@ class Uploader {
             }
             if (rename) {
               const window = windowManager.create(IWindowList.RENAME_WINDOW)!
-              await waitForShow(window.webContents)
-              window.webContents.send(RENAME_FILE_NAME, fileName, item.fileName, window.webContents.id)
+              logger.info('wait for rename window ready...')
+              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
@@ -177,6 +174,8 @@ class Uploader {
         })
       }, 500)
       return false
+    } finally {
+      ipcMain.removeAllListeners(GET_RENAME_FILE_NAME)
     }
   }
 }

src/renderer/pages/Gallery.vue

@@ -659,7 +659,7 @@ export default {
         transform scale(1.1)
       &-img
         width 100%
-        object-fit fill
+        object-fit contain
     &__tool-panel
       color #ddd
       margin-bottom 4px

src/renderer/pages/RenamePage.vue

@@ -1,20 +1,37 @@
 <template>
-  <div id="rename-page">
+  <div class="p-[20px] flex flex-col justify-between">
     <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>
-      <div class="pull-right">
+      <div class="w-full flex justify-end mt-[20px]">
         <el-button
           round
           size="small"
@@ -35,35 +52,52 @@
   </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>
@@ -73,10 +107,6 @@ export default {
 }
 </script>
 <style lang='stylus'>
-  #rename-page
-    padding 0 20px
-    .pull-right
-      float right
-    .el-form-item__label
-      color #ddd
+  .el-form-item__label
+    color #ddd
 </style>

src/universal/events/constants.ts

@@ -29,6 +29,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'