ref: 支持插件市场展示插件描述

src/main/tray.js

@@ -7,7 +7,20 @@ function createTray(window) {
     const appIcon = new Tray(path.join(__static, './rocket.png'));
     const contextMenu = Menu.buildFromTemplate([
       {
-        id: 3,
+        label: "帮助文档", click: () => {
+          process.nextTick((() => {
+            shell.openExternal('https://github.com/clouDr-f2e/rubick');
+          }))
+        }
+      }, {
+        label: "意见反馈", click: () => {
+          process.nextTick((() => {
+            shell.openExternal('https://github.com/clouDr-f2e/rubick/issues')
+          }))
+        }
+      },
+      {type: "separator"},
+      {
         label: '显示窗口',
         accelerator: "Alt+R",
         click() {
@@ -15,23 +28,25 @@ function createTray(window) {
         }
       },
       {
-        id: 4,
+        role: 'quit',
-        label: '文档',
+        label: '退出'
+      },
+      {
+        label: '重启',
         click() {
-          shell.openExternal('https://muwoo.github.io/rubick-doc/');
+          app.relaunch();
+          app.quit();
         }
       },
-
+      {type: "separator"},
       {
-        id: 5,
+        label: '偏好设置',
-        label: '显示窗口',
         click() {
           window.show();
-        }
+          window.webContents.send('tray-setting');
+        },
       },
-
       {
-        id: 6,
         label: '关于',
         click() {
           dialog.showMessageBox({
@@ -39,21 +54,8 @@ function createTray(window) {
             message: '极简、插件化的现代桌面软件',
             detail: `Version: ${pkg.version}\nAuthor: muwoo`
           });
-        }
+        },
       },
-      {
-        id: 7,
-        role: 'quit',
-        label: '退出'
-      },
-      {
-        id: 7,
-        label: '重启',
-        click() {
-          app.relaunch();
-          app.exit();
-        }
-      }
     ]);
     appIcon.on('click', () => {
       appIcon.popUpContextMenu(contextMenu);

src/renderer/App.vue

@@ -108,6 +108,7 @@ export default {
     ipcRenderer.on('new-window', this.newWindow);
     // 超级面板打开插件
     ipcRenderer.on('superPanel-openPlugin', (e, args) => {
+      this.closeTag();
       ipcRenderer.send('msg-trigger', {
         type: 'showMainWindow',
       });
@@ -145,6 +146,11 @@ export default {
       });
       config && this.openPlugin(config);
     });
+    // 打开偏好设置
+    ipcRenderer.on('tray-setting', () => {
+      this.showMainUI();
+      this.changePath({key: 'settings'});
+    });
     const searchNd = document.getElementById('search');
     searchNd && searchNd.addEventListener('keydown', this.checkNeedInit)
   },

src/renderer/pages/search/subpages/market.vue

@@ -26,7 +26,7 @@
 
 
         <a-list-item-meta
-            @click="showPannel(item)"
+            @click="showPannel(item, index)"
             :description="item.description"
         >
           <div slot="title">{{ item.pluginName }}</div>
@@ -37,12 +37,43 @@
         </a-list-item-meta>
       </a-list-item>
     </a-list>
+    <a-drawer
+      placement="right"
+      :visible="show"
+      @close="show=false"
+      width="100%"
+    >
+      <div class="plugin-market-desc" slot="title">
+        <img width="80" :src="currentSelect.logo"/>
+        <div class="desc">
+          <h4>{{currentSelect.pluginName}}</h4>
+          <div class="info">
+            <div class="actor">
+              开发者：{{currentSelect.author}}
+              <a-button
+                v-if="showButton(currentSelect)"
+                :loading="loading[currentSelect.index]"
+                @click="download(currentSelect.index, currentSelect)"
+                icon="cloud-download"
+                type="primary"
+              >
+                获取
+              </a-button>
+            </div>
+            <div>{{currentSelect.description}}</div>
+          </div>
+        </div>
+      </div>
+      <div class="market-plugin-detail" v-html="readme"></div>
+    </a-drawer>
   </div>
 </template>
 
 <script>
 import api from '../../../assets/api';
 import {mapActions, mapState} from 'vuex';
+import marked from "marked";
+const rendererMD = new marked.Renderer();
 
 export default {
   data() {
@@ -78,19 +109,68 @@ export default {
     showButton(item) {
       return !this.devPlugins.filter(plugin => (plugin.name === item.name && plugin.type === 'prod')).length;
     },
-    showPannel(item) {
+    showPannel(item, index) {
       this.show = true;
       this.currentSelect = item;
+      this.currentSelect.index = index;
     },
     ...mapActions('main', ['downloadPlugin'])
   },
   computed: {
-    ...mapState('main', ['devPlugins'])
+    ...mapState('main', ['devPlugins']),
+    readme() {
+      marked.setOptions({
+        renderer: rendererMD,
+        gfm: true,
+        tables: true,
+        breaks: false,
+        pedantic: false,
+        sanitize: false,
+        smartLists: true,
+        smartypants: false
+      });
+      try {
+        return marked(this.currentSelect.detail);
+      } catch (e) {
+        return '暂无描述信息'
+      }
+
+    }
   }
 }
 </script>
 
 <style lang="less">
+.market-plugin-detail {
+  img {
+    width: 100%;
+  }
+  height: 430px;
+  overflow: auto;
+  &::-webkit-scrollbar {
+    width: 0;
+  }
+}
+.plugin-market-desc {
+  display: flex;
+  img {
+    margin-right: 20px;
+  }
+  .desc {
+    flex: 1;
+  }
+  .info {
+    font-size: 12px;
+    color: #999;
+    font-weight: normal;
+    padding-right: 40px;
+  }
+  .actor {
+    flex: 1;
+    display: flex;
+    justify-content: space-between;
+  }
+}
  .market {
    height: calc(~'100vh - 110px');
    background: #fff;