✨ 修改插件runner为browserview

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,
   };
 };