🔨 cherry pick

feature/src/views/installed/index.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="installed">
     <div v-if="!localPlugins.length">
-      <a-result status="404" title="暂无任何插件" sub-title="去插件市场选择安装合适的插件吧！" />
+      <a-result
+        status="404"
+        title="暂无任何插件"
+        sub-title="去插件市场选择安装合适的插件吧！"
+      />
     </div>
     <div class="container" v-else>
       <div class="installed-list">
@@ -44,8 +48,7 @@
               @click="deletePlugin(pluginDetail)"
             >
               移除
-            </a-button
+            </a-button>
-            >
           </div>
         </div>
         <a-tabs default-active-key="1">
@@ -61,6 +64,14 @@
                   :key="cmd"
                   v-for="cmd in item.cmds"
                   @close="removeFeature(cmd)"
+                  @click="
+                    !cmd.label &&
+                      openPlugin({
+                        code: item.code,
+                        cmd
+                      })
+                  "
+                  :class="{ executable: !cmd.label }"
                   :color="!cmd.label && '#87d068'"
                 >
                   {{ cmd.label || cmd }}
@@ -74,7 +85,6 @@
         </a-tabs>
       </div>
     </div>
-
   </div>
 </template>
 
@@ -83,6 +93,7 @@ import { useStore } from "vuex";
 import { computed, ref } from "vue";
 import path from "path";
 import MarkdownIt from "markdown-it";
+const { ipcRenderer } = window.require("electron");
 
 const { remote } = window.require("electron");
 const fs = window.require("fs");
@@ -94,11 +105,11 @@ const baseDir = path.join(appPath, "./rubick-plugins");
 const store = useStore();
 const localPlugins = computed(() =>
   store.state.localPlugins.filter(
-    (plugin) => plugin.name !== "rubick-system-feature"
+    plugin => plugin.name !== "rubick-system-feature"
   )
 );
 const updateLocalPlugin = () => store.dispatch("updateLocalPlugin");
-const startUnDownload = (name) => store.dispatch("startUnDownload", name);
+const startUnDownload = name => store.dispatch("startUnDownload", name);
 
 const currentSelect = ref([0]);
 
@@ -106,6 +117,23 @@ const pluginDetail = computed(() => {
   return localPlugins.value[currentSelect.value] || {};
 });
 
+const openPlugin = ({ cmd, code }) => {
+  console.log(pluginDetail.value);
+  window.rubick.openPlugin(
+    JSON.parse(
+      JSON.stringify({
+        ...pluginDetail.value,
+        cmd,
+        ext: {
+          code,
+          type: "text",
+          payload: null
+        }
+      })
+    )
+  );
+};
+
 const readme = computed(() => {
   if (!pluginDetail.value.name) return "";
   const readmePath = path.resolve(
@@ -121,7 +149,7 @@ const readme = computed(() => {
   return "";
 });
 
-const deletePlugin = async (plugin) => {
+const deletePlugin = async plugin => {
   startUnDownload(plugin.name);
   await window.market.deletePlugin(plugin);
   updateLocalPlugin();
@@ -198,6 +226,15 @@ const deletePlugin = async (plugin) => {
     .desc-item {
       border-bottom: 1px solid #ddd;
       padding: 10px 0;
+      .ant-tag {
+        margin-top: 6px;
+        &.executable {
+          cursor: pointer;
+          &:hover {
+           transform: translateY(-2px);
+          }
+        }
+      }
       .desc-title {
         display: flex;
         align-items: center;

feature/src/views/settings/index.vue

@@ -333,6 +333,10 @@ const { shortCut, common, local, global } = toRefs(state);
       font-weight: lighter;
       margin-top: 10px;
       position: relative;
+      :deep(.ant-input) {
+        color: #6c9fe2;
+        font-weight: lighter;
+      }
       &.ant-input-affix-wrapper {
         display: flex;
       }

public/preload.js

@@ -4,7 +4,7 @@ const os = require("os");
 const ipcSendSync = (type, data) => {
   const returnValue = ipcRenderer.sendSync("msg-trigger", {
     type,
-    data,
+    data
   });
   if (returnValue instanceof Error) throw returnValue;
   return returnValue;
@@ -13,7 +13,7 @@ const ipcSendSync = (type, data) => {
 const ipcSend = (type, data) => {
   ipcRenderer.send("msg-trigger", {
     type,
-    data,
+    data
   });
 };
 
@@ -30,7 +30,9 @@ window.rubick = {
   onPluginOut(cb) {
     typeof cb === "function" && (window.rubick.hooks.onPluginOut = cb);
   },
-
+  openPlugin(plugin) {
+    ipcSendSync("loadPlugin", plugin);
+  },
   // 窗口交互
   hideMainWindow() {
     ipcSendSync("hideMainWindow");
@@ -49,7 +51,7 @@ window.rubick = {
       (window.rubick.hooks.onSubInputChange = onChange);
     ipcSendSync("setSubInput", {
       placeholder,
-      isFocus,
+      isFocus
     });
   },
   removeSubInput() {
@@ -74,15 +76,15 @@ window.rubick = {
   copyText(text) {
     return ipcSendSync("copyText", { text });
   },
-  copyFile: (file) => {
+  copyFile: file => {
-    return ipcSendSync("copyFile", { file })
+    return ipcSendSync("copyFile", { file });
   },
   db: {
-    put: (data) => ipcSendSync("dbPut", { data }),
+    put: data => ipcSendSync("dbPut", { data }),
-    get: (id) => ipcSendSync("dbGet", { id }),
+    get: id => ipcSendSync("dbGet", { id }),
-    remove: (doc) => ipcSendSync("dbRemove", { doc }),
+    remove: doc => ipcSendSync("dbRemove", { doc }),
-    bulkDocs: (docs) => ipcSendSync("dbBulkDocs", { docs }),
+    bulkDocs: docs => ipcSendSync("dbBulkDocs", { docs }),
-    allDocs: (key) => ipcSendSync("dbAllDocs", { key }),
+    allDocs: key => ipcSendSync("dbAllDocs", { key })
   },
   dbStorage: {
     setItem: (key, value) => {
@@ -93,14 +95,14 @@ window.rubick = {
       const res = ipcSendSync("dbPut", { data: target });
       if (res.error) throw new Error(res.message);
     },
-    getItem: (key) => {
+    getItem: key => {
       const res = ipcSendSync("dbGet", { id: key });
       return res && "value" in res ? res.value : null;
     },
-    removeItem: (key) => {
+    removeItem: key => {
       const res = ipcSendSync("dbGet", { id: key });
       res && ipcSendSync("dbRemove", { doc: res });
-    },
+    }
   },
   isDarkColors() {
     return false;

src/main/browsers/runner.ts

@@ -3,9 +3,11 @@ import path from "path";
 import commonConst from "../../common/utils/commonConst";
 import { PLUGIN_INSTALL_DIR as baseDir } from "@/common/constans/main";
 
-const getRelativePath = (indexPath) => {
+const getRelativePath = indexPath => {
-  return commonConst.windows() ? indexPath.replace("file://", "") : indexPath.replace("file:", "");
+  return commonConst.windows()
-}
+    ? indexPath.replace("file://", "")
+    : indexPath.replace("file:", "");
+};
 
 const getPreloadPath = (plugin, pluginIndexPath) => {
   const { name, preload, tplPath, indexPath } = plugin;
@@ -54,8 +56,8 @@ export default () => {
         devTools: true,
         webviewTag: true,
         preload,
-        session: ses,
+        session: ses
-      },
+      }
     });
     window.setBrowserView(view);
     view.webContents.loadURL(pluginIndexPath);
@@ -67,6 +69,25 @@ export default () => {
       executeHooks("PluginReady", plugin.ext);
       window.webContents.executeJavaScript(`window.pluginLoaded()`);
     });
+    // 修复请求跨域问题
+    view.webContents.session.webRequest.onBeforeSendHeaders(
+      (details, callback) => {
+        callback({
+          requestHeaders: { referer: "*", ...details.requestHeaders }
+        });
+      }
+    );
+
+    view.webContents.session.webRequest.onHeadersReceived(
+      (details, callback) => {
+        callback({
+          responseHeaders: {
+            "Access-Control-Allow-Origin": ["*"],
+            ...details.responseHeaders
+          }
+        });
+      }
+    );
   };
 
   const removeView = (window: BrowserWindow) => {
@@ -95,6 +116,6 @@ export default () => {
     init,
     getView,
     removeView,
-    executeHooks,
+    executeHooks
   };
 };

src/main/common/api.ts

@@ -6,7 +6,7 @@ import {
   Notification,
   nativeImage,
   clipboard,
-  shell,
+  shell
 } from "electron";
 import { runner, detach } from "../browsers";
 import fs from "fs";
@@ -37,7 +37,15 @@ export const API: any = {
       return;
     }
   },
-  openPlugin({ plugin }, window) {
+
+  loadPlugin({ data: plugin }, window) {
+    window.webContents.executeJavaScript(
+      `window.loadPlugin(${JSON.stringify(plugin)})`
+    );
+    API.openPlugin({ data: plugin }, window);
+  },
+
+  openPlugin({ data: plugin }, window) {
     if (API.currentPlugin && API.currentPlugin.name === plugin.name) return;
     window.setSize(window.getSize()[0], 60);
     runnerInstance.removeView(window);
@@ -45,7 +53,7 @@ export const API: any = {
     API.currentPlugin = plugin;
     window.webContents.executeJavaScript(
       `window.setCurrentPlugin(${JSON.stringify({
-        currentPlugin: API.currentPlugin,
+        currentPlugin: API.currentPlugin
       })})`
     );
     window.show();
@@ -86,7 +94,7 @@ export const API: any = {
     if (!originWindow) return;
     originWindow.webContents.executeJavaScript(
       `window.setSubInput(${JSON.stringify({
-        placeholder: data.placeholder,
+        placeholder: data.placeholder
       })})`
     );
   },
@@ -106,7 +114,7 @@ export const API: any = {
     if (!originWindow) return;
     originWindow.webContents.executeJavaScript(
       `window.setSubInputValue(${JSON.stringify({
-        value: data.text,
+        value: data.text
       })})`
     );
   },
@@ -121,7 +129,7 @@ export const API: any = {
     const notify = new Notification({
       title: plugin.pluginName,
       body,
-      icon: plugin.logo,
+      icon: plugin.logo
     });
     notify.show();
   },
@@ -166,7 +174,7 @@ export const API: any = {
       ...API.currentPlugin,
       features: (() => {
         let has = false;
-        API.currentPlugin.features.some((feature) => {
+        API.currentPlugin.features.some(feature => {
           has = feature.code === data.feature.code;
           return has;
         });
@@ -174,11 +182,11 @@ export const API: any = {
           return [...API.currentPlugin.features, data.feature];
         }
         return API.currentPlugin.features;
-      })(),
+      })()
     };
     window.webContents.executeJavaScript(
       `window.updatePlugin(${JSON.stringify({
-        currentPlugin: API.currentPlugin,
+        currentPlugin: API.currentPlugin
       })})`
     );
     return true;
@@ -186,16 +194,16 @@ export const API: any = {
   removeFeature({ data }, window) {
     API.currentPlugin = {
       ...API.currentPlugin,
-      features: API.currentPlugin.features.filter((feature) => {
+      features: API.currentPlugin.features.filter(feature => {
         if (data.code.type) {
           return feature.code.type !== data.code.type;
         }
         return feature.code !== data.code;
-      }),
+      })
     };
     window.webContents.executeJavaScript(
       `window.updatePlugin(${JSON.stringify({
-        currentPlugin: API.currentPlugin,
+        currentPlugin: API.currentPlugin
       })})`
     );
     return true;
@@ -207,12 +215,12 @@ export const API: any = {
       runnerInstance.getView().webContents.sendInputEvent({
         type: "keyDown",
         modifiers,
-        keyCode: code,
+        keyCode: code
       });
     } else {
       runnerInstance.getView().webContents.sendInputEvent({
         type: "keyDown",
-        keyCode: code,
+        keyCode: code
       });
     }
   },
@@ -223,11 +231,11 @@ export const API: any = {
     window.setBrowserView(null);
     window.webContents
       .executeJavaScript(`window.getMainInputInfo()`)
-      .then((res) => {
+      .then(res => {
         detachInstance.init(
           {
             ...API.currentPlugin,
-            subInput: res,
+            subInput: res
           },
           window.getBounds(),
           view

src/renderer/plugins-manager/index.ts

@@ -11,7 +11,7 @@ import { PLUGIN_INSTALL_DIR as baseDir } from "@/common/constans/renderer";
 
 const createPluginManager = (): any => {
   const pluginInstance = new PluginHandler({
-    baseDir,
+    baseDir
   });
 
   const state: any = reactive({
@@ -19,7 +19,7 @@ const createPluginManager = (): any => {
     plugins: [],
     localPlugins: [],
     currentPlugin: {},
-    pluginLoading: false,
+    pluginLoading: false
   });
 
   const appList = ref([]);
@@ -28,25 +28,29 @@ const createPluginManager = (): any => {
     appList.value = await appSearch(nativeImage);
   };
 
-  const openPlugin = (plugin) => {
+  const loadPlugin = plugin => {
+    state.pluginLoading = true;
+    state.currentPlugin = plugin;
+  };
+
+  const openPlugin = plugin => {
     if (plugin.pluginType === "ui" || plugin.pluginType === "system") {
       if (state.currentPlugin && state.currentPlugin.name === plugin.name) {
         return;
       }
-      state.pluginLoading = true;
+      loadPlugin(plugin);
-      state.currentPlugin = plugin;
       ipcRenderer.sendSync("msg-trigger", {
         type: "openPlugin",
-        plugin: JSON.parse(
+        data: JSON.parse(
           JSON.stringify({
             ...plugin,
             ext: plugin.ext || {
               code: plugin.feature.code,
               type: plugin.cmd.type || "text",
-              payload: null,
+              payload: null
-            },
+            }
           })
-        ),
+        )
       });
       setSearchValue("");
     }
@@ -57,13 +61,18 @@ const createPluginManager = (): any => {
 
   const { searchValue, onSearch, setSearchValue, placeholder } =
     searchManager();
-  const { options, searchFocus, clipboardFile, clearClipboardFile, readClipboardContent } =
+  const {
-    optionsManager({
+    options,
-      searchValue,
+    searchFocus,
-      appList,
+    clipboardFile,
-      openPlugin,
+    clearClipboardFile,
-      currentPlugin: toRefs(state).currentPlugin,
+    readClipboardContent
-    });
+  } = optionsManager({
+    searchValue,
+    appList,
+    openPlugin,
+    currentPlugin: toRefs(state).currentPlugin
+  });
   // plugin operation
   const getPluginInfo = async ({ pluginName, pluginPath }) => {
     const pluginInfo = await pluginInstance.getAdapterInfo(
@@ -75,11 +84,11 @@ const createPluginManager = (): any => {
       icon: pluginInfo.logo,
       indexPath: commonConst.dev()
         ? "http://localhost:8081/#/"
-        : `file://${path.join(pluginPath, "../", pluginInfo.main)}`,
+        : `file://${path.join(pluginPath, "../", pluginInfo.main)}`
     };
   };
 
-  const changeSelect = (select) => {
+  const changeSelect = select => {
     state.currentPlugin = select;
   };
 
@@ -90,6 +99,9 @@ const createPluginManager = (): any => {
   const removePlugin = (plugin: any) => {
     // todo
   };
+  
+  window.loadPlugin = plugin => loadPlugin(plugin);
+
   window.updatePlugin = ({ currentPlugin }: any) => {
     state.currentPlugin = currentPlugin;
     remote.getGlobal("LOCAL_PLUGINS").updatePlugin(currentPlugin);
@@ -125,7 +137,7 @@ const createPluginManager = (): any => {
     searchFocus,
     clipboardFile,
     clearClipboardFile,
-    readClipboardContent,
+    readClipboardContent
   };
 };
 

src/renderer/shims-vue.d.ts

@@ -1,22 +1,23 @@
 /* eslint-disable */
-declare module '*.vue' {
+declare module "*.vue" {
-  import type { DefineComponent } from 'vue'
+  import type { DefineComponent } from "vue";
-  const component: DefineComponent<{}, {}, any>
+  const component: DefineComponent<{}, {}, any>;
-  export default component
+  export default component;
 }
 
-declare module 'main' {
+declare module "main" {
-  export function main (): any
+  export function main(): any;
 }
 
-declare const __static: string
+declare const __static: string;
 
-declare module 'lodash.throttle'
+declare module "lodash.throttle";
 
 interface Window {
   setSubInput: ({ placeholder }: { placeholder: string }) => void;
   setSubInputValue: ({ value }: { value: string }) => void;
   removeSubInput: () => void;
+  loadPlugin: (plugin: any) => void;
   updatePlugin: (plugin: any) => void;
   initRubick: () => void;
   setCurrentPlugin: (plugin: any) => void;