feat:添加插件市场分类

src/main/browsers/main.js

@@ -57,7 +57,7 @@ module.exports = () => {
     });
     win.on("blur", () => {
       const childWindows = win.getChildWindows();
-      if (!childWindows.length) win.hide();
+      // if (!childWindows.length) win.hide();
     });
   };
 

src/renderer/assets/api/index.js

@@ -5,10 +5,23 @@ export default {
     axios.get(
       "https://gitcode.net/api/v4/projects/weixin_43881430%2Fquicker/releases"
     ),
-  getPlugins: () =>
+  getPlugins: path =>
     axios.get(
-      "https://gitlab.com/api/v4/projects/layyback%2Fquicker-market/repository/tree?path=plugins"
+      `https://gitlab.com/api/v4/projects/layyback%2Fquicker-market/repository/tree?ref=dev&path=${path}`
     ),
+  getMenu: () =>
+    axios.get(
+      "https://gitlab.com/api/v4/projects/layyback%2Fquicker-market/repository/tree?path=plugins&ref=dev"
+    ),
+  getLogo: plugin =>
+    `https://gitlab.com/layyback/quicker-market/-/raw/master/plugins/${plugin.name}/${plugin.logo}`,
+
+  getReadme: plugin =>
+    axios.get(
+      `https://gitlab.com/layyback/quicker-market/-/raw/master/plugins/${plugin.name}/${plugin.detail}`
+    ),
+  getDownloadUrl: plugin =>
+    `https://gitlab.com/api/v4/projects/layyback%2Fquicker-market/repository/archive.zip?path=plugins%2F${plugin.name}`,
   getPluginDetail: pluginName =>
     axios.get(
       `https://gitlab.com/api/v4/projects/layyback%2Fquicker-market/repository/files/plugins%2F${pluginName}%2Fplugin.json/raw?ref=master`

src/renderer/pages/plugins/index.vue

@@ -11,6 +11,7 @@
     <!-- 本地插件 -->
     <div v-else>
       <webview id="webview" :src="templatePath" :preload="preload"></webview>
+      <!-- <webview id="webview" :src="templatePath" :preload="preload"></webview> -->
     </div>
   </div>
 </template>

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

 <template>
   <div class="market">
-    <a-carousel v-if="bannerList && !!bannerList.length" arrows>
-      <div
-        slot="prevArrow"
-        slot-scope="props"
-        class="custom-slick-arrow"
-        style="left: 10px; zindex: 1"
+    <a-menu mode="vertical" v-model="selectedMenu" @click="getPlugins">
+      <a-menu-item
+        v-for="(item, index) in menu"
+        :key="item.id"
+        :value="item.path"
       >
-        <a-icon type="left-circle" />
-      </div>
-      <div
-        slot="nextArrow"
-        slot-scope="props"
-        class="custom-slick-arrow"
-        style="right: 10px"
-      >
-        <a-icon type="right-circle" />
-      </div>
-      <div v-for="banner in bannerList">
-        <img @click="jumpTo(banner.link)" width="100%" :src="banner.src" />
-      </div>
-    </a-carousel>
-    <a-divider v-if="bannerList && !!bannerList.length"></a-divider>
-    <h2>插件</h2>
-    <a-list
-      item-layout="horizontal"
-      style="width: 100%"
-      :grid="{ gutter: 16, column: 2 }"
-      :data-source="pluginList"
-    >
-      <a-list-item slot="renderItem" slot-scope="item, index">
-        <a-button
-          v-if="showButton(item) === 'download'"
-          :loading="loading[index]"
-          type="link"
-          slot="actions"
-          @click="download(index, item)"
+        <a-icon :type="icon[index]" />
+        {{ item.name }}
+      </a-menu-item>
+    </a-menu>
+    <div class="market-content">
+      <a-carousel v-if="bannerList && !!bannerList.length" arrows>
+        <div
+          slot="prevArrow"
+          slot-scope="props"
+          class="custom-slick-arrow"
+          style="left: 10px; zindex: 1"
         >
-          <a-icon
-            v-show="!loading[index]"
-            style="font-size: 20px"
-            type="cloud-download"
-          />
-        </a-button>
-        <a-button
-          v-if="showButton(item) === 'update'"
-          :loading="loading[index]"
-          type="link"
-          slot="actions"
-          @click="update(index, item)"
+          <a-icon type="left-circle" />
+        </div>
+        <div
+          slot="nextArrow"
+          slot-scope="props"
+          class="custom-slick-arrow"
+          style="right: 10px"
         >
-          <a-icon
-            v-show="!loading[index]"
-            style="font-size: 20px; color: #409eff"
-            type="sync"
-          />
-        </a-button>
+          <a-icon type="right-circle" />
+        </div>
+        <div v-for="banner in bannerList">
+          <img @click="jumpTo(banner.link)" width="100%" :src="banner.src" />
+        </div>
+      </a-carousel>
+      <a-divider v-if="bannerList && !!bannerList.length"></a-divider>
+      <h2>插件</h2>
+      <a-list
+        item-layout="horizontal"
+        style="width: 100%"
+        :grid="{ gutter: 16, column: 2 }"
+        :data-source="pluginList"
+      >
+        <a-list-item slot="renderItem" slot-scope="item, index">
+          <a-button
+            v-if="showButton(item) === 'download'"
+            :loading="loading[index]"
+            type="link"
+            slot="actions"
+            @click="download(index, item)"
+          >
+            <a-icon
+              v-show="!loading[index]"
+              style="font-size: 20px"
+              type="cloud-download"
+            />
+          </a-button>
+          <a-button
+            v-if="showButton(item) === 'update'"
+            :loading="loading[index]"
+            type="link"
+            slot="actions"
+            @click="update(index, item)"
+          >
+            <a-icon
+              v-show="!loading[index]"
+              style="font-size: 20px; color: #409eff"
+              type="sync"
+            />
+          </a-button>
 
-        <a-list-item-meta
-          @click="showPannel(item, index)"
-          :description="item.description"
-        >
-          <div slot="title">{{ item.pluginName }}</div>
-          <a-avatar slot="avatar" :src="item.logo" />
-        </a-list-item-meta>
-      </a-list-item>
-    </a-list>
+          <a-list-item-meta
+            @click="showPannel(item, index)"
+            :description="item.description"
+          >
+            <div slot="title">{{ item.pluginName }}</div>
+            <a-avatar slot="avatar" :src="item.logo" />
+          </a-list-item-meta>
+        </a-list-item>
+      </a-list>
+    </div>
     <a-drawer
       placement="right"
       :visible="show"
@@ -119,20 +131,35 @@ const rendererMD = new marked.Renderer();
 export default {
   data() {
     return {
+      menu: [],
       pluginList: [],
       loading: {},
       bannerList: [],
       show: false,
+      selectedMenu: [],
+      icon: ["calculator", "tool", "build"],
       currentSelect: {}
     };
   },
   async created() {
-    this.getPlugins();
+    this.getMenu();
     // this.bannerList = bannerRes.result;
   },
   methods: {
-    getPlugins() {
-      api.getPlugins().then(async ({ data: res }) => {
+    getMenu() {
+      api.getMenu().then(async ({ data: res }) => {
+        if (!res.length) return;
+        this.menu = res;
+        const firstItem = res[0];
+        this.selectedMenu = [firstItem.id];
+        this.getPlugins({ item: { value: firstItem.path } });
+      });
+    },
+    getPlugins({ item }) {
+      console.log(item);
+      const path = encodeURIComponent(item.value);
+      api.getPlugins(path).then(async ({ data: res }) => {
+        this.pluginList = [];
         res.forEach(async plugin => {
           const pluginItem = await this.getPluginDetail(plugin.name);
           this.pluginList.push(pluginItem);
@@ -140,20 +167,17 @@ export default {
       });
     },
     async getPluginDetail(name) {
-      const {
-        data: plugin
-      } = await api.getPluginDetail(name);
+      const { data: plugin } = await api.getPluginDetail(name);
       if (plugin.detail && isMdFile(plugin.detail)) {
-        const { readme } = await axios.get(
-          `https://gitlab.com/layyback/quicker-market/-/raw/master/plugins/${plugin.name}/${plugin.detail}`
-        );
+        const { readme } = await api.getReadme(plugin);
         plugin.readme = readme;
       } else {
         plugin.readme = plugin.detail;
       }
-      plugin.logo = `https://gitlab.com/layyback/quicker-market/-/raw/master/plugins/${plugin.name}/${plugin.logo}`;
+      plugin.logo = api.getLogo(plugin);
       // plugin.logo = `https://gitcode.net/weixin_43881430/quicker-market/-/raw/master/plugins/${plugin.name}/${logo}`;
-      plugin.downloadUrl = `https://gitlab.com/api/v4/projects/layyback%2Fquicker-market/repository/archive.zip?path=plugins%2F${plugin.name}`;
+      plugin.downloadUrl = api.getDownloadUrl(plugin);
+      // plugin.downloadUrl = `https://gitlab.com/api/v4/projects/layyback%2Fquicker-market/repository/archive.zip?path=plugins%2F${plugin.name}`;
       // plugin.downloadUrl =
       //   "https://gitcode.net/api/v4/projects/weixin_43881430%2Fquicker-market/repository/archive.zip";
 
@@ -275,9 +299,17 @@ export default {
 .market {
   height: calc(~"100vh - 110px");
   background: #fff;
-  padding: 20px;
   box-sizing: border-box;
   overflow: auto;
+  display: flex;
+  .ant-menu {
+    width: 220px;
+  }
+  .market-content {
+    flex: 1;
+    padding: 20px;
+    box-sizing: border-box;
+  }
   .ant-carousel .slick-slide {
     text-align: center;
     height: 235px;
@@ -318,5 +350,8 @@ export default {
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+  .ant-list-item-action {
+    margin-left: 0;
+  }
 }
 </style>