🎉 Release: v2.4.0-beta.3

ISSUES CLOSED: #1130

CHANGELOG.md

@@ -1,3 +1,13 @@
+# :tada: 2.4.0-beta.3 (2023-07-09)
+
+
+### :bug: Bug Fixes
+
+* rename page bug ([bc2e928](https://github.com/Molunerfinn/PicGo/commit/bc2e928)), closes [#1130](https://github.com/Molunerfinn/PicGo/issues/1130)
+* tailwind css bug ([e3566b5](https://github.com/Molunerfinn/PicGo/commit/e3566b5))
+
+
+
 # :tada: 2.4.0-beta.2 (2023-07-09)
 
 

README.md

@@ -59,7 +59,7 @@ PicGo 本体支持如下图床：
 | GitHub Release  | https://github.com/Molunerfinn/PicGo/releases | All | 国内下载速度可能会慢 |
 | [腾讯云COS](https://cloud.tencent.com/product/cos)  | https://github.com/Molunerfinn/PicGo/releases 附在更新日志结尾 | All | 感谢 [腾讯云COS](https://cloud.tencent.com/product/cos) 提供的赞助支持 |
 | [山东大学镜像站](https://mirrors.sdu.edu.cn/) | https://mirrors.sdu.edu.cn/github-release/Molunerfinn_PicGo | All | 感谢 [山东大学镜像站](https://mirrors.sdu.edu.cn/) 提供的镜像支持 |
-| [Scoop](https://scoop.sh/) | `scoop bucket add helbing https://github.com/helbing/scoop-bucket` & `scoop install picgo` | Windows | 感谢 @helbing 的贡献 |
+| [Scoop](https://scoop.sh/) | `scoop bucket add extras` & `scoop install picgo` | Windows | 感谢 @huangnauh 和 @Gladtbam 的贡献 |
 | [Chocolatey](https://chocolatey.org/) | `choco install picgo` | Windows | 感谢 @iYato 的贡献 |
 | [Homebrew](https://brew.sh/) | `brew install picgo --cask` | macOS | 感谢 @womeimingzi11 的贡献 |
 | [AUR](https://aur.archlinux.org/packages/yay) | `yay -S picgo-appimage` | Arch-Linux | 感谢 @houbaron 的贡献 |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "picgo",
-  "version": "2.4.0-beta.2",
+  "version": "2.4.0-beta.3",
   "private": true,
   "scripts": {
     "build": "vue-cli-service electron:build",

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'

tailwind.config.js

@@ -14,5 +14,9 @@ module.exports = {
       }
     }
   },
-  plugins: []
+  plugins: [],
+  corePlugins: {
+    // due to https://github.com/tailwindlabs/tailwindcss/issues/6602 - buttons disappear
+    preflight: false
+  }
 }