Added: plugin handler but with bugs

package.json

@@ -82,7 +82,7 @@
     "lowdb": "^1.0.0",
     "md5": "^2.2.1",
     "melody.css": "^1.0.2",
-    "picgo": "^1.1.7",
+    "picgo": "^1.1.8",
     "qiniu": "^7.1.1",
     "request": "^2.83.0",
     "request-promise": "^4.2.2",

src/main/utils/picgoCoreIPC.js

@@ -3,6 +3,7 @@ import path from 'path'
 // eslint-disable-next-line
 const requireFunc = typeof __webpack_require__ === 'function' ? __non_webpack_require__ : require
 const PicGo = requireFunc('picgo')
+const PluginHandler = requireFunc('picgo/lib/PluginHandler')
 
 // get uploader or transformer config
 const getConfig = (name, type, ctx) => {
@@ -32,10 +33,7 @@ const handleConfigWithFunction = config => {
   return config
 }
 
-export default (app, ipcMain) => {
+const handleGetPluginList = (ipcMain, STORE_PATH, CONFIG_PATH) => {
-  const STORE_PATH = app.getPath('userData')
-  const CONFIG_PATH = path.join(STORE_PATH, '/data.json')
-
   ipcMain.on('getPluginList', event => {
     const picgo = new PicGo(CONFIG_PATH)
     const pluginList = picgo.pluginLoader.getList()
@@ -50,7 +48,7 @@ export default (app, ipcMain) => {
         name: pluginList[i].replace(/picgo-plugin-/, ''),
         author: pluginPKG.author,
         description: pluginPKG.description,
-        logo: path.join(pluginPath, 'logo.png').split(path.sep).join('/'),
+        logo: 'file://' + path.join(pluginPath, 'logo.png').split(path.sep).join('/'),
         config: {
           plugin: {
             name: pluginList[i].replace(/picgo-plugin-/, ''),
@@ -66,10 +64,28 @@ export default (app, ipcMain) => {
           }
         },
         enabled: picgo.getConfig(`plugins.${pluginList[i]}`),
-        pkg: pluginPKG
+        homepage: pluginPKG.homepage ? pluginPKG.homepage : ''
       }
       list.push(obj)
     }
     event.sender.send('pluginList', list)
   })
 }
+
+const handlePluginInstall = (ipcMain, STORE_PATH, CONFIG_PATH) => {
+  ipcMain.on('installPlugin', (event, msg) => {
+    const picgo = new PicGo(CONFIG_PATH)
+    const pluginHandler = new PluginHandler(picgo)
+    picgo.on('installSuccess', (plugin) => {
+      console.log(plugin)
+    })
+    pluginHandler.install([`picgo-plugin-${msg}`])
+  })
+}
+
+export default (app, ipcMain) => {
+  const STORE_PATH = app.getPath('userData')
+  const CONFIG_PATH = path.join(STORE_PATH, '/data.json')
+  handleGetPluginList(ipcMain, STORE_PATH, CONFIG_PATH)
+  handlePluginInstall(ipcMain, STORE_PATH, CONFIG_PATH)
+}

src/renderer/components/SettingView/Plugin.vue

@@ -3,17 +3,21 @@
     <div class="view-title">
       插件设置
     </div>
-    <el-row class="handle-bar">
+    <el-row class="handle-bar" :class="{ 'cut-width': pluginList.length > 6 }">
       <el-input
         v-model="searchText"
         placeholder="搜索npm上的PicGo插件"
         size="small"
-      ></el-input>
+      >
+        <i slot="suffix" class="el-input__icon el-icon-close" v-if="searchText" @click="cleanSearch" style="cursor: pointer"></i>
+      </el-input>
     </el-row>
-    <el-row :gutter="10" class="plugin-list">
+    <el-row :gutter="10" class="plugin-list" v-loading="loading">
       <el-col :span="12" v-for="(item, index) in pluginList" :key="item.name">
         <div class="plugin-item">
-          <img class="plugin-item__logo" :src="'file://' + item.logo">
+          <img class="plugin-item__logo" :src="item.logo"
+          onerror="this.src='static/logo.png'"
+          >
           <div class="plugin-item__content">
             <div class="plugin-item__name">
               {{ item.name }}
@@ -26,10 +30,16 @@
                 {{ item.author }}
               </span>
               <span class="plugin-item__config" >
-                <!-- <span class="reload-button" v-if="item.reload" @click="reloadApp">
+                <template v-if="searchText">
-                  重启
+                  <span class="config-button install" v-if="!item.hasInstall" @click="installPlugin(item.name)">
-                </span> -->
+                    安装
+                  </span>
+                  <span class="config-button" v-if="item.reload" @click="reloadApp">
+                    重启
+                  </span>
+                </template>
                 <i
+                  v-else
                   class="el-icon-setting"
                   @click="buildContextMenu(item)"
                 ></i>
@@ -61,6 +71,7 @@
 </template>
 <script>
 import ConfigForm from '../ConfigForm'
+import { debounce } from 'lodash'
 export default {
   name: 'plugin',
   components: {
@@ -74,19 +85,38 @@ export default {
       config: [],
       currentType: '',
       configName: '',
-      dialogVisible: false
+      dialogVisible: false,
+      pluginNameList: [],
+      loading: true
+    }
+  },
+  computed: {
+    npmSearchText () {
+      return this.searchText.match('picgo-plugin-')
+        ? this.searchText
+        : this.searchText !== ''
+          ? `picgo-plugin-${this.searchText}`
+          : this.searchText
+    }
+  },
+  watch: {
+    npmSearchText (val) {
+      if (val) {
+        this.loading = true
+        this.getSearchResult(val)
+      } else {
+        this.getPluginList()
+      }
     }
   },
   created () {
     this.$electron.ipcRenderer.on('pluginList', (evt, list) => {
       this.pluginList = list.map(item => item)
+      this.pluginNameList = list.map(item => item.name)
+      this.loading = false
     })
     this.getPluginList()
-    document.addEventListener('keydown', (e) => {
+    this.getSearchResult = debounce(this.getSearchResult, 250)
-      if (e.which === 123) {
-        this.$electron.remote.getCurrentWindow().toggleDevTools()
-      }
-    })
   },
   methods: {
     buildContextMenu (plugin) {
@@ -128,10 +158,16 @@ export default {
     getPluginList () {
       this.$electron.ipcRenderer.send('getPluginList')
     },
+    installPlugin (val) {
+      this.$electron.ipcRenderer.send('installPlugin', val)
+    },
     reloadApp () {
       this.$electron.remote.app.relaunch()
       this.$electron.remote.app.exit(0)
     },
+    cleanSearch () {
+      this.searchText = ''
+    },
     async handleConfirmConfig () {
       const result = await this.$refs.configForm.validate()
       if (result !== false) {
@@ -155,20 +191,63 @@ export default {
         this.dialogVisible = false
         this.getPluginList()
       }
+    },
+    getSearchResult: function (val) {
+      this.$http.get(`https://api.npms.io/v2/search?q=${val}`)
+        .then(res => {
+          console.log(res.data.results)
+          this.pluginList = res.data.results.map(item => {
+            return this.handleSearchResult(item)
+          })
+          this.loading = false
+        })
+        .catch(err => {
+          console.log(err)
+          this.loading = false
+        })
+    },
+    handleSearchResult (item) {
+      return {
+        name: item.package.name.replace(/picgo-plugin-/, ''),
+        author: item.package.author.name,
+        description: item.package.description,
+        logo: `https://cdn.jsdelivr.net/npm/${item.package.name}/logo.png`,
+        config: {},
+        homepage: item.package.links ? item.package.links.homepage : '',
+        hasInstall: this.pluginNameList.some(plugin => plugin === item.package.name),
+        reload: false
+      }
     }
   }
 }
 </script>
 <style lang='stylus'>
-.view-title
-  color #eee
-  font-size 20px
-  text-align center
-  margin 10px auto
 #plugin-view
+  position relative
   padding 0 20px 0
+  .plugin-list
+    height: 339px;
+    box-sizing: border-box;
+    padding: 8px 15px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    position: absolute;
+    top: 70px;
+    left: 5px;
+    transition: all 0.2s ease-in-out 0.1s;
+    width: 100%
+    .el-loading-mask
+      left: 20px
+      width: calc(100% - 40px)
+  .view-title
+    color #eee
+    font-size 20px
+    text-align center
+    margin 10px auto
   .handle-bar
     margin-bottom 20px
+    &.cut-width
+      padding-right: 8px
   .el-input__inner
     border-radius 0
   .plugin-item
@@ -220,7 +299,7 @@ export default {
     &__config
       float right
       font-size 16px
-    .reload-button
+    .config-button
       font-size 12px
       color #ddd
       background #222
@@ -231,4 +310,10 @@ export default {
       position absolute
       top 4px
       right 20px
+      transition all .2s ease-in-out
+      &:hover
+        background: #1B9EF3
+        color #fff
+      &.install
+        right 0px
 </style>

yarn.lock

@@ -6194,9 +6194,9 @@ performance-now@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
 
-picgo@^1.1.7:
+picgo@^1.1.8:
-  version "1.1.7"
+  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/picgo/-/picgo-1.1.7.tgz#04e6e9a4fdd97a7f1efc8cfc75ad869610f7c120"
+  resolved "https://registry.yarnpkg.com/picgo/-/picgo-1.1.8.tgz#0a2bc8b71b8783c5bf7046802f55e9254277a6e1"
   dependencies:
     chalk "^2.4.1"
     commander "^2.17.0"