✨ 修改插件runner为browserview

src/common/utils/localPlugin.ts

@@ -43,4 +43,10 @@ global.LOCAL_PLUGINS = {
       fs.writeFileSync(configPath, JSON.stringify(global.LOCAL_PLUGINS.PLUGINS));
     }
   },
+  async deletePlugin(plugin) {
+    await pluginInstance.uninstall([plugin.name]);
+    global.LOCAL_PLUGINS.PLUGINS = global.LOCAL_PLUGINS.PLUGINS.filter((p) => plugin.name !== p.name);
+    fs.writeFileSync(configPath, JSON.stringify(global.LOCAL_PLUGINS.PLUGINS));
+    return global.LOCAL_PLUGINS.PLUGINS;
+  },
 };

src/core/app-search/darwin.ts

@@ -112,7 +112,7 @@ export default async (nativeImage: any) => {
       ...app,
       value: "plugin",
       desc: app.path,
-      type: "app",
+      pluginType: "app",
       action: `open ${app.path.replace(" ", "\\ ") as string}`,
       keyWords: [appSubStr],
     };

src/core/plugin-handler/index.ts

@@ -34,7 +34,6 @@ class AdapterHandler {
       );
     }
     this.baseDir = options.baseDir;
-    console.log(this.baseDir);
     this.registry = options.registry || "https://registry.npm.taobao.org";
   }
 

src/main/browsers/runner.ts

@@ -1,22 +1,25 @@
-import { app, BrowserWindow } from "electron";
+import { BrowserView, BrowserWindow, session } from "electron";
+import path from "path";
+import commonConst from "../../common/utils/commonConst";
 
 export default () => {
-  let win;
+  let view;
 
-  const init = (plugin) => {
-    if (win === null || win === undefined) {
-      createWindow(plugin);
+  const init = (plugin, window: BrowserWindow) => {
+    if (view === null || view === undefined) {
+      createView(plugin, window);
     }
   };
 
-  const createWindow = (plugin) => {
-    win = new BrowserWindow({
-      autoHideMenuBar: true,
-      width: 850,
-      height: 700,
-      alwaysOnTop: true,
-      focusable: true,
-      show: false,
+  const createView = (plugin, window: BrowserWindow) => {
+    const preload = commonConst.dev()
+      ? `http://localhost:8080/preload.js`
+      : path.resolve(plugin.indexPath, `../`, plugin.preload);
+
+    const ses = session.fromPartition("<" + plugin.name + ">");
+    ses.setPreloads([`${__static}/preload.js`]);
+
+    view = new BrowserView({
       webPreferences: {
         enableRemoteModule: true,
         webSecurity: false,
@@ -24,24 +27,32 @@ export default () => {
         contextIsolation: false,
         devTools: true,
         webviewTag: true,
-        preload: `${__static}/preload.js`,
+        preload,
+        session: ses,
       },
     });
-    win.loadURL(plugin.indexPath);
-
-    win.once("ready-to-show", () => {
-      win.show();
-    });
-
-    win.on("closed", () => {
-      win = undefined;
+    window.setBrowserView(view);
+    view.webContents.loadURL(plugin.indexPath);
+    window.once("ready-to-show", () => {
+      view.setBounds({ x: 0, y: 60, width: 800, height: 600 });
+      view.setAutoResize({ width: true });
+      window.setSize(800, 660);
+      view.webContents.openDevTools();
     });
   };
 
-  const getWindow = () => win;
+  const removeView = (window: BrowserWindow) => {
+    if (!view) return;
+    window.removeBrowserView(view);
+    window.setSize(800, 60);
+    view = undefined;
+  };
+
+  const getView = () => view;
 
   return {
     init,
-    getWindow,
+    getView,
+    removeView,
   };
 };

src/main/common/api.ts

@@ -7,8 +7,12 @@ const API: any = {
   setExpendHeight({ height }: { height: number }, win: BrowserWindow): void {
     win.setSize(800, height || 60);
   },
-  openPlugin({plugin}) {
-    runnerInstance.init(plugin);
+  openPlugin({ plugin }, window) {
+    runnerInstance.removeView(window);
+    runnerInstance.init(plugin, window);
+  },
+  removePlugin(e, window) {
+    runnerInstance.removeView(window);
   },
 };
 

src/renderer/App.vue

@@ -1,21 +1,36 @@
 <template>
   <div id="components-layout">
     <div class="rubick-select">
-      <Search @changeCurrent="changeIndex" :menuPluginInfo="menuPluginInfo" @onSearch="onSearch" />
+      <Search
+        :currentPlugin="currentPlugin"
+        @changeCurrent="changeIndex"
+        @onSearch="onSearch"
+        @openMenu="openMenu"
+        @changeSelect="changeSelect"
+      />
     </div>
     <Result :searchValue="searchValue" :currentSelect="currentSelect" :options="options" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { watch, ref, nextTick } from "vue";
+import { watch, ref, nextTick, toRaw } from "vue";
 import { ipcRenderer } from "electron";
 import Result from "./components/result.vue";
 import Search from "./components/search.vue";
 import getWindowHeight from "../common/utils/getWindowHeight";
 import createPluginManager from "./plugins-manager";
 
-const { initPlugins, getPluginInfo, options, onSearch, searchValue } = createPluginManager();
+const {
+  initPlugins,
+  getPluginInfo,
+  options,
+  onSearch,
+  searchValue,
+  changeSelect,
+  openPlugin,
+  currentPlugin,
+} = createPluginManager();
 
 initPlugins();
 
@@ -49,6 +64,13 @@ const changeIndex = (index) => {
     return;
   currentSelect.value = currentSelect.value + index;
 };
+
+const openMenu = () => {
+  openPlugin({
+    ...toRaw(menuPluginInfo.value),
+    cmd: "插件市场",
+  });
+};
 </script>
 
 <style lang="less">

src/renderer/components/search.vue

@@ -1,14 +1,16 @@
 <template>
   <div class="rubick-select">
+    <div class="select-tag" v-show="currentPlugin.cmd">{{ currentPlugin.cmd }}</div>
     <a-input
       class="main-input"
       placeholder="Hi, Rubick2"
-      @change="(e) => emit('onSearch', e)"
+      @change="(e) => changeValue(e)"
       @keydown.down="() => emit('changeCurrent', 1)"
       @keydown.up="() => emit('changeCurrent', -1)"
+      @keydown="checkNeedInit"
     >
       <template #suffix>
-        <div @click="openMenu" class="suffix-tool" >
+        <div @click="() => emit('openMenu')" class="suffix-tool" >
           <div class="rubick-logo">
             <img src="../assets/logo.png" />
           </div>
@@ -19,19 +21,33 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, defineEmits, toRaw } from "vue";
+import { defineProps, defineEmits, ref } from "vue";
 import { ipcRenderer } from "electron";
 
-const props = defineProps({
-  menuPluginInfo: {},
+defineProps({
+  currentPlugin: {},
 });
 
-const emit = defineEmits(["onSearch", "changeCurrent"]);
+const searchValue = ref("");
 
-const openMenu = async () => {
-  ipcRenderer.sendSync("msg-trigger", {
-    type: "openPlugin",
-    plugin: toRaw(props.menuPluginInfo),
+const changeValue = (e) => {
+  emit("onSearch", e);
+  searchValue.value = e.target.value;
+};
+
+const emit = defineEmits(["onSearch", "changeCurrent", "openMenu", "changeSelect"]);
+
+const checkNeedInit = (e) => {
+  console.log(e.keyCode);
+  if (searchValue.value === "" && e.keyCode === 8) {
+    closeTag();
+  }
+};
+
+const closeTag = () => {
+  emit("changeSelect", {});
+  ipcRenderer.send("msg-trigger", {
+    type: "removePlugin",
   });
 };
 </script>
@@ -45,6 +61,21 @@ const openMenu = async () => {
   top: 0;
   left: 0;
   width: 100%;
+  align-items: center;
+  .select-tag {
+    white-space: pre;
+    user-select: none;
+    font-size: 18px;
+    border-radius: 16px;
+    height: 32px;
+    position: relative;
+    color: #fff;
+    background-color: rgba(255, 78, 164, 0.8);
+    display: inline-flex;
+    align-items: center;
+    margin-right: 1px;
+    padding: 0 10px;
+  }
   .main-input {
     height: 60px !important;
     box-sizing: border-box;

src/renderer/plugins-manager/index.ts

@@ -28,6 +28,7 @@ const createPluginManager = (): any => {
     options: [],
     searchValue: "",
     localPlugins: [],
+    currentPlugin: {},
   });
 
   const initPlugins = async () => {
@@ -67,16 +68,15 @@ const createPluginManager = (): any => {
                 "node_modules",
                 plugin.name
               );
-              ipcRenderer.sendSync("msg-trigger", {
-                type: "openPlugin",
-                plugin: {
-                  ...toRaw(plugin),
-                  indexPath: `file://${path.join(
-                    pluginPath,
-                    "./",
-                    plugin.main
-                  )}`,
-                },
+              openPlugin({
+                ...toRaw(plugin),
+                indexPath: `file://${path.join(
+                  pluginPath,
+                  "./",
+                  plugin.main
+                )}`,
+                cmd,
+                feature: fe,
               });
             },
           })),
@@ -111,7 +111,7 @@ const createPluginManager = (): any => {
         })
         .map((plugin) => {
           plugin.click = () => {
-            _openPlugin({ plugin });
+            openPlugin(plugin);
           };
           return plugin;
         }),
@@ -129,8 +129,18 @@ const createPluginManager = (): any => {
     };
   };
 
-  const _openPlugin = ({ plugin }) => {
-    //
+  const openPlugin = (plugin) => {
+    if (plugin.pluginType === "ui") {
+      state.currentPlugin = plugin;
+      ipcRenderer.sendSync("msg-trigger", {
+        type: "openPlugin",
+        plugin: JSON.parse(JSON.stringify(plugin)),
+      });
+    }
+  };
+
+  const changeSelect = (select) => {
+    state.currentPlugin = select;
   };
 
   return {
@@ -140,6 +150,8 @@ const createPluginManager = (): any => {
     removePlugin,
     onSearch,
     getPluginInfo,
+    openPlugin,
+    changeSelect,
   };
 };