♻️ 代码重构

src/renderer/App.vue

@@ -7,9 +7,15 @@
         @onSearch="onSearch"
         @openMenu="openMenu"
         @changeSelect="changeSelect"
+        :searchValue="searchValue"
       />
     </div>
-    <Result :searchValue="searchValue" :currentSelect="currentSelect" :options="options" />
+    <Result
+      :currentPlugin="currentPlugin"
+      :searchValue="searchValue"
+      :currentSelect="currentSelect"
+      :options="options"
+    />
   </div>
 </template>
 
@@ -40,7 +46,7 @@ const menuPluginInfo = ref({});
 getPluginInfo({
   pluginName: "feature",
   // eslint-disable-next-line no-undef
-  pluginPath: `${__static}/feature/plugin.json`,
+  pluginPath: `${__static}/feature/package.json`,
 }).then((res) => {
   menuPluginInfo.value = res;
 });
@@ -50,7 +56,7 @@ watch([searchValue], () => {
   nextTick(() => {
     ipcRenderer.sendSync("msg-trigger", {
       type: "setExpendHeight",
-      height: getWindowHeight(searchValue.value ? options.value : []),
+      data: getWindowHeight(searchValue.value ? options.value : []),
     });
   });
 });
@@ -68,6 +74,7 @@ const changeIndex = (index) => {
 const openMenu = () => {
   openPlugin({
     ...toRaw(menuPluginInfo.value),
+    feature: menuPluginInfo.value.features[0],
     cmd: "插件市场",
   });
 };

src/renderer/components/result.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-show="!!options.length && searchValue" class="options" ref="scrollDom">
+  <div v-show="!!options.length && searchValue && !currentPlugin.name" class="options" ref="scrollDom">
     <a-list item-layout="horizontal" :dataSource="options">
       <template #renderItem="{ item, index }">
         <a-list-item
@@ -45,6 +45,7 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
+  currentPlugin: {},
 });
 
 const renderTitle = (title) => {

src/renderer/components/search.vue

@@ -2,12 +2,14 @@
   <div class="rubick-select">
     <div class="select-tag" v-show="currentPlugin.cmd">{{ currentPlugin.cmd }}</div>
     <a-input
+      id="search"
       class="main-input"
       placeholder="Hi, Rubick2"
-      @change="(e) => changeValue(e)"
+      @input="(e) => changeValue(e)"
       @keydown.down="() => emit('changeCurrent', 1)"
       @keydown.up="() => emit('changeCurrent', -1)"
       @keydown="checkNeedInit"
+      :value="searchValue"
     >
       <template #suffix>
         <div @click="() => emit('openMenu')" class="suffix-tool" >
@@ -24,22 +26,22 @@
 import { defineProps, defineEmits, ref } from "vue";
 import { ipcRenderer } from "electron";
 
-defineProps({
+const props = defineProps({
+  searchValue: {
+    type: [String, Number],
+    default: "",
+  },
   currentPlugin: {},
 });
 
-const searchValue = ref("");
-
 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) {
+  if (props.searchValue === "" && e.keyCode === 8) {
     closeTag();
   }
 };

src/renderer/plugins-manager/index.ts

@@ -1,21 +1,13 @@
-import { reactive, toRefs, toRaw } from "vue";
+import { reactive, toRefs, ref } from "vue";
 import { nativeImage, remote, ipcRenderer } from "electron";
 import { appSearch, PluginHandler } from "@/core";
 import path from "path";
-import throttle from "lodash.throttle";
 import commonConst from "@/common/utils/commonConst";
+import searchManager from "./search";
+import optionsManager from "./options";
 
 const appPath = remote.app.getPath("cache");
 
-function searchKeyValues(lists, value) {
-  return lists.filter((item) => {
-    if (typeof item === "string") {
-      return item.toLowerCase().indexOf(value.toLowerCase()) >= 0;
-    }
-    return item.type.toLowerCase().indexOf(value.toLowerCase()) >= 0;
-  });
-}
-
 const createPluginManager = (): any => {
   const baseDir = path.join(appPath, "./rubick-plugins");
   const pluginInstance = new PluginHandler({
@@ -25,100 +17,47 @@ const createPluginManager = (): any => {
   const state: any = reactive({
     appList: [],
     plugins: [],
-    options: [],
-    searchValue: "",
     localPlugins: [],
     currentPlugin: {},
   });
 
+  const appList = ref([]);
+
   const initPlugins = async () => {
-    state.appList = await appSearch(nativeImage);
+    appList.value = await appSearch(nativeImage);
   };
 
-  const addPlugin = (plugin: any) => {
-    state.plugins.unshift(plugin);
-  };
-
-  const removePlugin = (plugin: any) => {
-    // todo
-  };
-
-  const onSearch = throttle((e) => {
-    const value = e.target.value;
-    state.searchValue = value;
-    if (!value) return;
-    state.localPlugins = remote.getGlobal("LOCAL_PLUGINS").getLocalPlugins();
-    let options: any = [];
-    // todo 先搜索 plugin
-    state.localPlugins.forEach((plugin) => {
-      const feature = plugin.features;
-      feature.forEach((fe) => {
-        const cmds = searchKeyValues(fe.cmds, value);
-        options = [
-          ...options,
-          ...cmds.map((cmd) => ({
-            name: cmd,
-            value: "plugin",
-            icon: plugin.logo,
-            desc: fe.explain,
-            type: plugin.pluginType,
-            click: () => {
-              const pluginPath = path.resolve(
-                pluginInstance.baseDir,
-                "node_modules",
-                plugin.name
-              );
-              openPlugin({
-                ...toRaw(plugin),
-                indexPath: `file://${path.join(
-                  pluginPath,
-                  "./",
-                  plugin.main
-                )}`,
-                cmd,
-                feature: fe,
-              });
+  const openPlugin = (plugin) => {
+    if (plugin.pluginType === "ui") {
+      state.currentPlugin = plugin;
+      ipcRenderer.sendSync("msg-trigger", {
+        type: "openPlugin",
+        plugin: JSON.parse(
+          JSON.stringify({
+            ...plugin,
+            ext: {
+              code: plugin.feature.code,
+              type: plugin.cmd.type || "text",
+              payload: null,
             },
-          })),
-        ];
+          })
+        ),
       });
-    });
-    // todo 再搜索 app
-    const descMap = new Map();
-    options = [
-      ...options,
-      ...state.appList
-        .filter((plugin) => {
-          if (!descMap.get(plugin)) {
-            descMap.set(plugin, true);
-            let has = false;
-            plugin.keyWords.some((keyWord) => {
-              if (
-                keyWord
-                  .toLocaleUpperCase()
-                  .indexOf(value.toLocaleUpperCase()) >= 0
-              ) {
-                has = keyWord;
-                plugin.name = keyWord;
-                return true;
-              }
-              return false;
-            });
-            return has;
-          } else {
-            return false;
-          }
-        })
-        .map((plugin) => {
-          plugin.click = () => {
-            openPlugin(plugin);
-          };
-          return plugin;
-        }),
-    ];
-    state.options = options;
-  }, 500);
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      // document.getElementById("search").value = "";
+      // state.searchValue = "";
+    }
+  };
 
+  const { searchValue, onSearch } = searchManager();
+  const { options } = optionsManager({
+    searchValue,
+    baseDir,
+    appList,
+    openPlugin,
+  });
+  // plugin operation
   const getPluginInfo = async ({ pluginName, pluginPath }) => {
     const pluginInfo = await pluginInstance.getAdapterInfo(pluginName, pluginPath);
     return {
@@ -129,20 +68,18 @@ const createPluginManager = (): any => {
     };
   };
 
-  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;
   };
 
+  const addPlugin = (plugin: any) => {
+    state.plugins.unshift(plugin);
+  };
+
+  const removePlugin = (plugin: any) => {
+    // todo
+  };
+
   return {
     ...toRefs(state),
     initPlugins,
@@ -152,6 +89,8 @@ const createPluginManager = (): any => {
     getPluginInfo,
     openPlugin,
     changeSelect,
+    options,
+    searchValue,
   };
 };
 

src/renderer/plugins-manager/options.ts

@@ -0,0 +1,100 @@
+import { ref, toRaw, toRefs, watch } from "vue";
+import throttle from "lodash.throttle";
+import { remote } from "electron";
+import path from "path";
+
+function searchKeyValues(lists, value) {
+  return lists.filter((item) => {
+    if (typeof item === "string") {
+      return item.toLowerCase().indexOf(value.toLowerCase()) >= 0;
+    }
+    return item.type.toLowerCase().indexOf(value.toLowerCase()) >= 0;
+  });
+}
+
+const optionsManager = ({ searchValue, baseDir, appList, openPlugin }) => {
+  const optionsRef = ref([]);
+
+  watch(searchValue, () => search(searchValue.value));
+  // search Input operation
+  const search = throttle((value) => {
+    if (!value) return;
+    const localPlugins = remote.getGlobal("LOCAL_PLUGINS").getLocalPlugins();
+    let options: any = [];
+    // todo 先搜索 plugin
+    localPlugins.forEach((plugin) => {
+      const feature = plugin.features;
+      feature.forEach((fe) => {
+        const cmds = searchKeyValues(fe.cmds, value);
+        options = [
+          ...options,
+          ...cmds.map((cmd) => ({
+            name: cmd,
+            value: "plugin",
+            icon: plugin.logo,
+            desc: fe.explain,
+            type: plugin.pluginType,
+            click: () => {
+              const pluginPath = path.resolve(
+                baseDir,
+                "node_modules",
+                plugin.name
+              );
+              openPlugin({
+                ...toRaw(plugin),
+                indexPath: `file://${path.join(
+                  pluginPath,
+                  "./",
+                  plugin.main
+                )}`,
+                cmd,
+                feature: fe,
+              });
+            },
+          })),
+        ];
+      });
+    });
+    // todo 再搜索 app
+    const appPlugins = appList.value || [];
+    const descMap = new Map();
+    options = [
+      ...options,
+      ...appPlugins
+        .filter((plugin) => {
+          if (!descMap.get(plugin)) {
+            descMap.set(plugin, true);
+            let has = false;
+            plugin.keyWords.some((keyWord) => {
+              if (
+                keyWord
+                  .toLocaleUpperCase()
+                  .indexOf(value.toLocaleUpperCase()) >= 0
+              ) {
+                has = keyWord;
+                plugin.name = keyWord;
+                return true;
+              }
+              return false;
+            });
+            return has;
+          } else {
+            return false;
+          }
+        })
+        .map((plugin) => {
+          plugin.click = () => {
+            openPlugin(plugin);
+          };
+          return plugin;
+        }),
+    ];
+    optionsRef.value = options;
+  }, 500);
+
+  return {
+    options: optionsRef,
+  };
+};
+
+export default optionsManager;

src/renderer/plugins-manager/search.ts

@@ -0,0 +1,20 @@
+import { reactive, toRefs } from "vue";
+
+const searchManager = () => {
+  const state = reactive({
+    searchValue: "",
+  });
+
+  // search Input operation
+  const onSearch = (e) => {
+    const value = e.target.value;
+    state.searchValue = value;
+  };
+
+  return {
+    ...toRefs(state),
+    onSearch,
+  };
+};
+
+export default searchManager;