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

ISSUES CLOSED: #1050

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

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>

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 = () => {