♻️ search 框输入交互优化

src/renderer/App.vue

@@ -9,6 +9,7 @@
         @changeSelect="changeSelect"
         :searchValue="searchValue"
         :placeholder="placeholder"
+        @choosePlugin="choosePlugin"
       />
     </div>
     <Result
@@ -56,6 +57,7 @@ getPluginInfo({
 
 watch([searchValue], () => {
   currentSelect.value = 0;
+  if (currentPlugin.value.name) return;
   nextTick(() => {
     ipcRenderer.sendSync("msg-trigger", {
       type: "setExpendHeight",
@@ -81,6 +83,12 @@ const openMenu = () => {
     cmd: "插件市场",
   });
 };
+
+const choosePlugin = () => {
+  const currentChoose = options.value[currentSelect.value];
+  console.log(currentChoose);
+  currentChoose.click();
+};
 </script>
 
 <style lang="less">

src/renderer/components/search.vue

@@ -7,13 +7,22 @@
       @input="(e) => changeValue(e)"
       @keydown.down="() => emit('changeCurrent', 1)"
       @keydown.up="() => emit('changeCurrent', -1)"
-      @keydown="checkNeedInit"
+      @keydown="e => checkNeedInit(e)"
       :value="searchValue"
       :placeholder="placeholder || 'Hi, Rubick2'"
+      @keypress.enter="
+        (e) => targetSearch({ value: e.target.value, type: 'enter' })
+      "
+      @keypress.space="
+        (e) => targetSearch({ value: e.target.value, type: 'space' })
+      "
     >
       <template #suffix>
         <div @click="() => emit('openMenu')" class="suffix-tool" >
-          <div class="rubick-logo">
+          <div v-if="currentPlugin && currentPlugin.logo" style="position: relative">
+            <img class="icon-tool" :src="currentPlugin.logo" />
+          </div>
+          <div v-else class="rubick-logo">
             <img src="../assets/logo.png" />
           </div>
         </div>
@@ -42,14 +51,31 @@ const changeValue = (e) => {
   emit("onSearch", e);
 };
 
-const emit = defineEmits(["onSearch", "changeCurrent", "openMenu", "changeSelect"]);
+const emit = defineEmits([
+  "onSearch",
+  "changeCurrent",
+  "openMenu",
+  "changeSelect",
+  "choosePlugin",
+]);
 
 const checkNeedInit = (e) => {
-  if (props.searchValue === "" && e.keyCode === 8) {
+  if (e.target.value === "" && e.keyCode === 8) {
     closeTag();
   }
 };
 
+const targetSearch = ({ value, type }) => {
+  if (props.currentPlugin.name) {
+    return ipcRenderer.sendSync("msg-trigger", {
+      type: "sendSubInputChangeEvent",
+      data: { text: value },
+    });
+  } else {
+    emit("choosePlugin");
+  }
+};
+
 const closeTag = () => {
   emit("changeSelect", {});
   ipcRenderer.send("msg-trigger", {
@@ -95,7 +121,7 @@ const closeTag = () => {
       border: none !important;
     }
   }
-  .rubick-logo {
+  .rubick-logo, .icon-tool {
     width: 40px;
     height: 40px;
     background: #574778;
@@ -107,6 +133,9 @@ const closeTag = () => {
       width: 32px;
     }
   }
+  .icon-tool {
+    background: #fff;
+  }
   .ant-input:focus {
     border: none;
     box-shadow: none;

src/renderer/plugins-manager/index.ts

@@ -3,6 +3,7 @@ import { nativeImage, remote, ipcRenderer } from "electron";
 import { appSearch, PluginHandler } from "@/core";
 import path from "path";
 import commonConst from "@/common/utils/commonConst";
+import { execSync } from "child_process";
 import searchManager from "./search";
 import optionsManager from "./options";
 
@@ -43,12 +44,11 @@ const createPluginManager = (): any => {
           })
         ),
       });
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      // document.getElementById("search").value = "";
-      // state.searchValue = "";
       setSearchValue("");
     }
+    if (plugin.pluginType === "app") {
+      execSync(plugin.action);
+    }
   };
 
   const { searchValue, onSearch, setSearchValue, placeholder } = searchManager();
@@ -57,6 +57,7 @@ const createPluginManager = (): any => {
     baseDir,
     appList,
     openPlugin,
+    currentPlugin: toRefs(state).currentPlugin,
   });
   // plugin operation
   const getPluginInfo = async ({ pluginName, pluginPath }) => {
@@ -85,6 +86,12 @@ const createPluginManager = (): any => {
     remote.getGlobal("LOCAL_PLUGINS").updatePlugin(currentPlugin);
   };
 
+  window.initRubick = () => {
+    state.currentPlugin = {};
+    setSearchValue("");
+    window.setSubInput({ placeholder: "" });
+  };
+
   return {
     ...toRefs(state),
     initPlugins,

src/renderer/plugins-manager/options.ts

@@ -12,12 +12,13 @@ function searchKeyValues(lists, value) {
   });
 }
 
-const optionsManager = ({ searchValue, baseDir, appList, openPlugin }) => {
+const optionsManager = ({ searchValue, baseDir, appList, openPlugin, currentPlugin }) => {
   const optionsRef = ref([]);
 
   watch(searchValue, () => search(searchValue.value));
   // search Input operation
   const search = throttle((value) => {
+    if (currentPlugin.value.name) return;
     if (!value) return;
     const localPlugins = remote.getGlobal("LOCAL_PLUGINS").getLocalPlugins();
     let options: any = [];

src/renderer/plugins-manager/search.ts

@@ -11,10 +11,6 @@ const searchManager = () => {
   const onSearch = (e) => {
     const value = e.target.value;
     state.searchValue = value;
-    ipcRenderer.sendSync("msg-trigger", {
-      type: "sendSubInputChangeEvent",
-      data: value,
-    });
   };
 
   const setSearchValue = (value: string) => {

src/renderer/shims-vue.d.ts

@@ -18,4 +18,5 @@ interface Window {
   setSubInputValue: ({ value }: { value: string }) => void;
   removeSubInput: () => void;
   updatePlugin: (plugin: any) => void;
+  initRubick: () => void;
 }