✨ 修改插件runner为browserview

2025-07-17 20:57:30 +08:00 · 2021-12-03 17:54:58 +08:00 · 2021-12-03 17:54:58 +08:00 · cd41f0561c
commit cd41f0561c
parent 0132a11d7e
18 changed files with 420 additions and 121 deletions
--- a/feature/package-lock.json
+++ b/feature/package-lock.json
@ -7918,6 +7918,14 @@
      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
      "dev": true
    },
+    "linkify-it": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-3.0.3.tgz",
+      "integrity": "sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==",
+      "requires": {
+        "uc.micro": "^1.0.1"
+      }
+    },
    "loader-fs-cache": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/loader-fs-cache/-/loader-fs-cache-1.0.3.tgz",
@ -8128,6 +8136,30 @@
        "object-visit": "^1.0.0"
      }
    },
+    "markdown-it": {
+      "version": "12.2.0",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-12.2.0.tgz",
+      "integrity": "sha512-Wjws+uCrVQRqOoJvze4HCqkKl1AsSh95iFAeQDwnyfxM09divCBSXlDR1uTvyUP3Grzpn4Ru8GeCxYPM8vkCQg==",
+      "requires": {
+        "argparse": "^2.0.1",
+        "entities": "~2.1.0",
+        "linkify-it": "^3.0.1",
+        "mdurl": "^1.0.1",
+        "uc.micro": "^1.0.5"
+      },
+      "dependencies": {
+        "argparse": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+          "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+        },
+        "entities": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz",
+          "integrity": "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w=="
+        }
+      }
+    },
    "md5.js": {
      "version": "1.3.5",
      "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@ -8145,6 +8177,11 @@
      "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==",
      "dev": true
    },
+    "mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+      "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4="
+    },
    "media-typer": {
      "version": "0.3.0",
      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@ -11898,6 +11935,11 @@
      "integrity": "sha512-pxnwLxeb/Z5SP80JDRzVjh58KsM6jZHRAOtTpS7sXLS4ogXNKC9ANxHHZqLLeVHZN35jCtI4JdmLLbLiC1kBow==",
      "dev": true
    },
+    "uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
+    },
    "uglify-js": {
      "version": "3.4.10",
      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz",
--- a/feature/package.json
+++ b/feature/package.json
@ -12,6 +12,7 @@
    "ant-design-vue": "^2.2.8",
    "axios": "^0.24.0",
    "core-js": "^3.6.5",
+    "markdown-it": "^12.2.0",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
--- a/feature/public/plugin.json
+++ b/feature/public/plugin.json
@ -5,6 +5,7 @@
  "logo": "logo.jpg",
  "version": "0.0.0",
  "preload":"preload.js",
+  "pluginType": "ui",
  "features": [
    {
      "code": "market",
--- a/feature/public/preload.js
+++ b/feature/public/preload.js
@ -0,0 +1 @@
+console.log("hello");
--- a/feature/src/App.vue
+++ b/feature/src/App.vue
@ -1,28 +1,32 @@
 <template>
  <div class="main-container">
    <div class="slider-bar">
-      <div class="top">
-        <div class="menu-item avatar">
-          <a-avatar shape="square" :size="30">
-            <template #icon><UserOutlined /></template>
-          </a-avatar>
-        </div>
-        <div class="menu-item" @click="changeMenu('market')">
-          <AppstoreOutlined :class="active === 'market' && 'active'" style="font-size: 24px;" />
-        </div>
-        <div class="menu-item" @click="changeMenu('installed')">
-          <HeartOutlined :class="active === 'installed' && 'active'" style="font-size: 24px;" />
-        </div>
-        <div class="menu-item" @click="changeMenu('settings')">
-          <SettingOutlined :class="active === 'installed' && 'active'" style="font-size: 24px;" />
-        </div>
-        <div class="menu-item" @click="changeMenu('dev')">
-          <BugOutlined :class="active === 'installed' && 'active'" style="font-size: 24px;" />
-        </div>
-      </div>
-      <div class="menu-item bottom" @click="changeMenu('more')">
-        <MenuOutlined style="font-size: 24px;" />
-      </div>
+      <a-menu v-model:selectedKeys="active" mode="horizontal" @select="({key}) => changeMenu(key)">
+        <a-menu-item key="market">
+          <template #icon>
+            <AppstoreOutlined />
+          </template>
+          插件市场
+        </a-menu-item>
+        <a-menu-item key="installed">
+          <template #icon>
+            <HeartOutlined />
+          </template>
+          已安装
+        </a-menu-item>
+        <a-menu-item key="settings">
+          <template #icon>
+            <SettingOutlined />
+          </template>
+          设置
+        </a-menu-item>
+        <a-menu-item key="user">
+          <template #icon>
+            <UserOutlined />
+          </template>
+          账户
+        </a-menu-item>
+      </a-menu>
    </div>
    <router-view />
  </div>
@ -30,10 +34,23 @@

 <script setup lang="ts">
 import { ref } from "vue";
-import { HeartOutlined, UserOutlined, SearchOutlined, MenuOutlined, AppstoreOutlined, SettingOutlined, BugOutlined } from "@ant-design/icons-vue";
-
-const active = ref("market");
+import { useRouter } from "vue-router";
+import {
+  HeartOutlined,
+  UserOutlined,
+  AppstoreOutlined,
+  SettingOutlined,
+} from "@ant-design/icons-vue";
+import { useStore } from "vuex";
+const router = useRouter();
+const active = ref(["market"]);
+const changeMenu = (key: any) => {
+  router.push(key);
+};

+const store = useStore();
+const init = () => store.dispatch("init");
+init();
 </script>
 <style lang="less">
 * {
@ -45,43 +62,10 @@ const active = ref("market");
  display: flex;
  align-items: flex-start;
  background: #F2EFEF;
+  flex-direction: column;

  .slider-bar {
-    -webkit-app-region: drag;
-    width: 60px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-direction: column;
-    padding-top: 15px;
-    height: 100vh;
-    background-image: linear-gradient(to top right, rgba(255, 159, 180, 0.3), rgba(255, 159, 180, 0.2));
-    color: #7D7170;
-    box-sizing: border-box;
-
-    .top {
-      display: flex;
-      align-items: center;
-      flex-direction: column;
-    }
-
-    .menu-item {
-      cursor: pointer;
-      margin-bottom: 40px;
-      -webkit-app-region: no-drag;
-
-      .active {
-        color: #ff4ea4;
-      }
-
-      &.avatar {
-        margin-bottom: 30px;
-      }
-
-      &.bottom {
-        margin-bottom: 20px;
-      }
-    }
+    width: 100%;
  }
 }
 </style>
--- a/feature/src/router/index.ts
+++ b/feature/src/router/index.ts
@ -1,12 +1,23 @@
 import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
 import Market from "../views/market/index.vue";
+import Installed from "../views/installed/index.vue";

 const routes: Array<RouteRecordRaw> = [
  {
-    path: "/",
-    name: "Market",
+    path: "/market",
+    name: "market",
    component: Market,
-  }
+  },
+  {
+    path: "/installed",
+    name: "installed",
+    component: Installed,
+  },
+  {
+    path: "/:catchAll(.*)",
+    name: "market",
+    component: Market,
+  },
 ];

 const router = createRouter({
--- a/feature/src/store/index.ts
+++ b/feature/src/store/index.ts
@ -35,7 +35,6 @@ export default createStore({
          origin.isloading = false;
        }
      );
-
      commit("commonUpdate", {
        localPlugins,
        totalPlugins,
@ -64,8 +63,17 @@ export default createStore({
          }
        }
      );
+      const localPlugins = (window as any).rubick.getLocalPlugins();
+
      commit("commonUpdate", {
        totalPlugins,
+        localPlugins,
+      });
+    },
+    updateLocalPlugin({ commit }) {
+      const localPlugins = (window as any).rubick.getLocalPlugins();
+      commit("commonUpdate", {
+        localPlugins,
      });
    },
  },
--- a/feature/src/views/installed/index.vue
+++ b/feature/src/views/installed/index.vue
@ -0,0 +1,163 @@
+<template>
+  <div class="installed">
+    <div class="installed-list">
+      <div :class="currentSelect === index ? 'item active' : 'item'" :key="index" v-for="(plugin, index) in localPlugins">
+        <img :src="plugin.logo" />
+        <div class="info">
+          <div class="title">{{ plugin.pluginName }} <span class="desc">v{{ plugin.version }}</span></div>
+          <div class="desc">{{ plugin.description }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="plugin-detail">
+      <div class="plugin-top">
+        <div class="left">
+          <div class="title">
+            {{ pluginDetail.pluginName }}
+            <a-tag>{{ pluginDetail.version }}</a-tag>
+          </div>
+          <div class="desc">
+            开发者：{{`${pluginDetail.author || '未知'}`}}
+          </div>
+          <div class="desc">
+            {{pluginDetail.description}}
+          </div>
+        </div>
+        <div class="right">
+          <a-button type="danger" size="small" shape="round" @click="deletePlugin(pluginDetail)">移除</a-button>
+        </div>
+      </div>
+      <a-tabs default-active-key="1">
+        <a-tab-pane key="1" tab="功能关键字">
+          <div class="feature-container">
+            <div class="desc-item" :key="index" v-for="(item, index) in pluginDetail.features">
+              <div>{{item.explain}}</div>
+              <a-tag
+                :key="cmd"
+                @click="openPlugin({cmd, plugin: pluginDetail, feature: item, router: $router})"
+                v-for="cmd in item.cmds"
+              >
+                {{cmd}}
+              </a-tag>
+            </div>
+          </div>
+        </a-tab-pane>
+        <a-tab-pane key="2" tab="详情介绍">
+          <div class="detail-container" v-html="readme"></div>
+        </a-tab-pane>
+      </a-tabs>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useStore } from "vuex";
+import { computed, ref } from "vue";
+import path from "path";
+import MarkdownIt from "markdown-it";
+
+const { remote } = window.require("electron");
+const fs = window.require("fs");
+const md = new MarkdownIt();
+
+const appPath = remote.app.getPath("cache");
+const baseDir = path.join(appPath, "./rubick-plugins");
+
+const store = useStore();
+const localPlugins = computed(() => store.state.localPlugins);
+const updateLocalPlugin = () => store.dispatch("updateLocalPlugin");
+
+const currentSelect = ref(0);
+
+const pluginDetail = computed(() => {
+  return localPlugins.value[currentSelect.value] || {};
+});
+
+const readme = computed(() => {
+  if(!pluginDetail.value.name) return "";
+  const str = fs.readFileSync(
+    path.resolve(baseDir, "node_modules", pluginDetail.value.name, "readme.md"),
+    "utf-8"
+  );
+  return md.render(str);
+});
+
+const deletePlugin = async (plugin) => {
+  await window.rubick.deletePlugin(plugin);
+  updateLocalPlugin();
+};
+</script>
+
+<style lang="less">
+.installed {
+  box-sizing: border-box;
+  width: 100%;
+  overflow: hidden;
+  background: #F3EFEF;
+  height: calc(~"100vh - 46px");
+  display: flex;
+  .installed-list {
+    width: 40%;
+    background: #fff;
+    height: 100%;
+    padding: 10px 0;
+    border-right: 1px solid #eee;
+    .item {
+      padding: 10px 20px;
+      display: flex;
+      align-items: center;
+      img {
+        width: 40px;
+        height: 40px;
+        margin-right: 20px;
+      }
+      .desc {
+        color: #999;
+      }
+      &.active {
+        background: #eee;
+      }
+    }
+  }
+  .plugin-detail {
+    padding: 20px 20px 0 20px;
+    box-sizing: border-box;
+    width: 60%;
+    height: 100%;
+    background: #fff;
+    .plugin-top {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      .title {
+        font-size: 20px;
+        display: flex;
+        align-items: center;
+      }
+      .desc {
+        font-size: 13px;
+        color: #999;
+      }
+    }
+    .detail-container, .feature-container {
+      height: 380px;
+      overflow: auto;
+      img {
+        width: 100%;
+      }
+    }
+    .desc-item {
+      border-bottom: 1px solid #ddd;
+      padding: 10px 0;
+      .desc-title {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      .desc-info {
+        color: #999;
+      }
+    }
+  }
+}
+</style>
--- a/feature/src/views/market/index.vue
+++ b/feature/src/views/market/index.vue
@ -78,8 +78,7 @@ const state = reactive({
 });

 const store = useStore();
-const init = () => store.dispatch("init");
-init();
+
 const totalPlugins = computed(() => store.state.totalPlugins);

 const { searchValue, current } = toRefs(state);
@ -93,6 +92,7 @@ const { searchValue, current } = toRefs(state);
  width: 100%;
  overflow: hidden;
  background: #F3EFEF;
+  height: calc(~"100vh - 46px");
  .left-menu {
    width: 200px;
    height: 100vh;
@ -116,7 +116,7 @@ const { searchValue, current } = toRefs(state);
  .container {
    background: #fff;
    width: calc(~'100% - 200px');
-    height: 100vh;
+    height: 100%;
    box-sizing: border-box;
    padding: 10px 20px;
    position: relative;
--- a/public/preload.js
+++ b/public/preload.js
@ -7,4 +7,7 @@ window.rubick = {
  downloadPlugin(plugin) {
    return remote.getGlobal("LOCAL_PLUGINS").downloadPlugin(plugin);
  },
+  deletePlugin(plugin) {
+    return remote.getGlobal("LOCAL_PLUGINS").deletePlugin(plugin);
+  },
 };
--- a/src/common/utils/localPlugin.ts
+++ b/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;
+  },
 };
--- a/src/core/app-search/darwin.ts
+++ b/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],
    };
--- a/src/core/plugin-handler/index.ts
+++ b/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";
  }

--- a/src/main/browsers/runner.ts
+++ b/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,
  };
 };
--- a/src/main/common/api.ts
+++ b/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);
  },
 };

--- a/src/renderer/App.vue
+++ b/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">
--- a/src/renderer/components/search.vue
+++ b/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;
--- a/src/renderer/plugins-manager/index.ts
+++ b/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,
  };
 };