✨ Feature: add file-name in gallery & add unknown-file-type placholder image

ISSUES CLOSED: #1050
2026-05-20 07:39:53 +08:00 · 2022-12-31 11:29:36 +08:00
parent 95556498f7
commit f0787d3ec2
16 changed files with 76 additions and 44 deletions
--- a/src/main.ts
+++ b/src/main.ts
@@ -36,7 +36,9 @@ Vue.prototype.$T = T
 Vue.prototype.$i18n = i18nManager

 Vue.use(ElementUI)
-Vue.use(VueLazyLoad)
+Vue.use(VueLazyLoad, {
+  error: `file://${__static.replace(/\\/g, '/')}/unknown-file-type.svg`
+})
 Vue.mixin(mainMixin)

 new Vue({
--- a/src/main/apis/app/system/index.ts
+++ b/src/main/apis/app/system/index.ts
@@ -247,8 +247,8 @@ export function createTray () {
          pasteText.push(pasteTemplate(pasteStyle, imgs[i], db.get('settings.customLink')))
          const notification = new Notification({
            title: T('UPLOAD_SUCCEED'),
-            body: imgs[i].imgUrl!,
-            icon: files[i]
+            body: imgs[i].imgUrl!
+            // icon: files[i]
          })
          setTimeout(() => {
            notification.show()
--- a/src/main/apis/app/uploader/apis.ts
+++ b/src/main/apis/app/uploader/apis.ts
@@ -30,8 +30,8 @@ export const uploadClipboardFiles = async (): Promise<string> => {
      handleCopyUrl(pasteTemplate(pasteStyle, img[0], db.get('settings.customLink')))
      const notification = new Notification({
        title: T('UPLOAD_SUCCEED'),
-        body: img[0].imgUrl!,
-        icon: img[0].imgUrl
+        body: img[0].imgUrl!
+        // icon: img[0].imgUrl
      })
      setTimeout(() => {
        notification.show()
@@ -68,8 +68,8 @@ export const uploadChoosedFiles = async (webContents: WebContents, files: IFileW
      pasteText.push(pasteTemplate(pasteStyle, imgs[i], db.get('settings.customLink')))
      const notification = new Notification({
        title: T('UPLOAD_SUCCEED'),
-        body: imgs[i].imgUrl!,
-        icon: files[i].path
+        body: imgs[i].imgUrl!
+        // icon: files[i].path
      })
      setTimeout(() => {
        notification.show()
--- a/src/main/apis/gui/index.ts
+++ b/src/main/apis/gui/index.ts
@@ -83,8 +83,8 @@ class GuiApi implements IGuiApi {
        pasteText.push(pasteTemplate(pasteStyle, imgs[i], db.get('settings.customLink')))
        const notification = new Notification({
          title: T('UPLOAD_SUCCEED'),
-          body: imgs[i].imgUrl as string,
-          icon: imgs[i].imgUrl
+          body: imgs[i].imgUrl as string
+          // icon: imgs[i].imgUrl
        })
        setTimeout(() => {
          notification.show()
--- a/src/main/events/ipcList.ts
+++ b/src/main/events/ipcList.ts
@@ -55,9 +55,9 @@ export default {
        handleCopyUrl(pasteTemplate(pasteStyle, img[0], db.get('settings.customLink')))
        const notification = new Notification({
          title: T('UPLOAD_SUCCEED'),
-          body: img[0].imgUrl!,
+          body: img[0].imgUrl!
          // icon: file[0]
-          icon: img[0].imgUrl
+          // icon: img[0].imgUrl
        })
        notification.show()
        await GalleryDB.getInstance().insert(img[0])
--- a/src/main/events/picgoCoreIPC.ts
+++ b/src/main/events/picgoCoreIPC.ts
@@ -27,7 +27,6 @@ import {
  PICGO_OPEN_FILE,
  PASTE_TEXT,
  OPEN_WINDOW,
-  DEFAULT_LOGO,
  GET_LANGUAGE_LIST,
  SET_CURRENT_LANGUAGE,
  GET_CURRENT_LANGUAGE
@@ -370,12 +369,6 @@ const handleOpenWindow = () => {
  })
 }

-const handleDefaultLogo = () => {
-  ipcMain.on(DEFAULT_LOGO, (event: IpcMainEvent) => {
-    event.sender.send(DEFAULT_LOGO, path.join(__static, 'roundLogo.png'))
-  })
-}
-
 const handleI18n = () => {
  ipcMain.on(GET_LANGUAGE_LIST, (event: IpcMainEvent) => {
    event.sender.send(GET_LANGUAGE_LIST, i18nManager.languageList)
@@ -415,7 +408,6 @@ export default {
    handleImportLocalPlugin()
    handleOpenFile()
    handleOpenWindow()
-    handleDefaultLogo()
    handleI18n()
  },
  // TODO: separate to single file
--- a/src/main/utils/common.ts
+++ b/src/main/utils/common.ts
@@ -21,8 +21,8 @@ export const showNotification = (options: IPrivateShowNotificationOption = {
 }) => {
  const notification = new Notification({
    title: options.title,
-    body: options.body,
-    icon: options.icon || undefined
+    body: options.body
+    // icon: options.icon || undefined
  })
  const handleClick = () => {
    if (options.clickToCopy) {
--- a/src/renderer/pages/Gallery.vue
+++ b/src/renderer/pages/Gallery.vue
@@ -83,6 +83,9 @@
            >
              <img v-lazy="item.imgUrl" class="gallery-list__item-img">
            </div>
+            <div class="gallery-list__file-name" :title="item.fileName">
+              {{ item.fileName }}
+            </div>
            <div class="gallery-list__tool-panel">
              <i class="el-icon-document" @click="copy(item)"></i>
              <i class="el-icon-edit-outline" @click="openDialog(item)"></i>
@@ -285,8 +288,9 @@ export default class extends Vue {
    const copyLink = await ipcRenderer.invoke(PASTE_TEXT, item)
    const obj = {
      title: this.$T('COPY_LINK_SUCCEED'),
-      body: copyLink,
-      icon: item.url || item.imgUrl
+      body: copyLink
+      // sometimes will cause lagging
+      // icon: item.url || item.imgUrl
    }
    const myNotification = new Notification(obj.title, obj)
    myNotification.onclick = () => {
@@ -332,8 +336,8 @@ export default class extends Vue {
    })
    const obj = {
      title: this.$T('CHANGE_IMAGE_URL_SUCCEED'),
-      body: this.imgInfo.imgUrl,
-      icon: this.imgInfo.imgUrl
+      body: this.imgInfo.imgUrl
+      // icon: this.imgInfo.imgUrl
    }
    const myNotification = new Notification(obj.title, obj)
    myNotification.onclick = () => {
@@ -527,7 +531,7 @@ export default class extends Vue {
      height 120px
      transition all .2s ease-in-out
      cursor pointer
-      margin-bottom 8px
+      margin-bottom 4px
      overflow hidden
      display flex
      &-fake
@@ -544,6 +548,7 @@ export default class extends Vue {
        object-fit fill
    &__tool-panel
      color #ddd
+      margin-bottom 4px
      i
        cursor pointer
        transition all .2s ease-in-out
@@ -556,6 +561,13 @@ export default class extends Vue {
        &.el-icon-delete
          &:hover
            color #F15140
+    &__file-name
+      overflow hidden
+      text-overflow ellipsis
+      white-space nowrap
+      color #ddd
+      font-size 14px
+      margin-bottom 4px
  .handle-bar
    color #ddd
    margin-bottom 10px
--- a/src/renderer/pages/Plugin.vue
+++ b/src/renderer/pages/Plugin.vue
@@ -121,7 +121,6 @@ import {
  PICGO_HANDLE_PLUGIN_ING,
  PICGO_TOGGLE_PLUGIN,
  SHOW_PLUGIN_PAGE_MENU,
-  DEFAULT_LOGO,
  GET_PICBEDS
 } from '#/events/constants'

@@ -146,7 +145,7 @@ export default class extends Vue {
  importLocalPluginToolTip = this.$T('PLUGIN_IMPORT_LOCAL')
  id = ''
  os = ''
-  defaultLogo: string = ''
+  defaultLogo: string = `this.src="file://${__static.replace(/\\/g, '/')}/roundLogo.png"`
  get npmSearchText () {
    return this.searchText.match('picgo-plugin-')
      ? this.searchText
@@ -249,19 +248,11 @@ export default class extends Vue {
        this.needReload = true
      }
    })
-    ipcRenderer.on(DEFAULT_LOGO, (evt: IpcRendererEvent, logoPath) => {
-      this.defaultLogo = `this.src="file://${logoPath.replace(/\\/g, '/')}"`
-    })
    this.getPluginList()
    this.getSearchResult = debounce(this.getSearchResult, 50)
-    this.getDefaultLogo()
    this.needReload = await this.getConfig<boolean>('needReload') || false
  }

-  getDefaultLogo () {
-    ipcRenderer.send(DEFAULT_LOGO)
-  }
-
  async buildContextMenu (plugin: IPicGoPlugin) {
    ipcRenderer.send(SHOW_PLUGIN_PAGE_MENU, plugin)
  }
@@ -449,7 +440,6 @@ export default class extends Vue {
    ipcRenderer.removeAllListeners('uninstallSuccess')
    ipcRenderer.removeAllListeners('updateSuccess')
    ipcRenderer.removeAllListeners('hideLoading')
-    ipcRenderer.removeAllListeners(DEFAULT_LOGO)
  }
 }
 </script>
--- a/src/renderer/pages/TrayPage.vue
+++ b/src/renderer/pages/TrayPage.vue
@@ -17,7 +17,7 @@
        <div class="list-title">{{ $T('ALREADY_UPLOAD') }}</div>
        <div v-for="item in files" :key="item.imgUrl" class="img-list">
          <div class="upload-img__container" @click="copyTheLink(item)">
-            <img :src="item.imgUrl" class="upload-img">
+            <img v-lazy="item.imgUrl" class="upload-img">
          </div>
        </div>
      </div>
@@ -41,8 +41,7 @@ export default class extends Vue {
  files: IResult<ImgInfo>[] = []
  notification = {
    title: this.$T('COPY_LINK_SUCCEED'),
-    body: '',
-    icon: ''
+    body: ''
  }

  clipboardFiles: ImgInfo[] = []
@@ -61,7 +60,6 @@ export default class extends Vue {

  async copyTheLink (item: ImgInfo) {
    this.notification.body = item.imgUrl!
-    this.notification.icon = item.imgUrl!
    const myNotification = new Notification(this.notification.title, this.notification)
    ipcRenderer.invoke(PASTE_TEXT, item)
    myNotification.onclick = () => {
--- a/src/universal/events/constants.ts
+++ b/src/universal/events/constants.ts
@@ -33,7 +33,6 @@ 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'
 export const OPEN_WINDOW = 'OPEN_WINDOW'
-export const DEFAULT_LOGO = 'DEFAULT_LOGO'
 export const GET_PICBEDS = 'GET_PICBEDS'
 // i18n
 export const GET_CURRENT_LANGUAGE = 'GET_CURRENT_LANGUAGE'
--- a/src/universal/types/types.d.ts
+++ b/src/universal/types/types.d.ts
@@ -211,7 +211,7 @@ type IUploadOption = string[]
 interface IShowNotificationOption {
  title: string
  body: string
-  icon?: string | import('electron').NativeImage
+  // icon?: string | import('electron').NativeImage
 }

 interface IPrivateShowNotificationOption extends IShowNotificationOption{