From c2f43bea3926c121bc97f08d5f4d58e82059f874 Mon Sep 17 00:00:00 2001
From: muwoo <2424880409@qq.com>
Date: Tue, 30 Nov 2021 15:44:56 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20=E4=B8=BB=E7=95=8C=E9=9D=A2?=
 =?UTF-8?q?=E5=BC=80=E5=8F=91&=E6=8F=92=E4=BB=B6=E8=BF=90=E8=A1=8C?=
 =?UTF-8?q?=E5=AE=B9=E5=99=A8=E5=BC=80=E5=8F=91&=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                     | 126 ++++-------------------
 package.json                          |   2 +
 runner/src/App.vue                    |   8 +-
 src/common/utils/throttle.ts          |  40 ++++++++
 src/main/browsers/runner.ts           |   2 +-
 src/renderer/App.vue                  | 139 ++++++--------------------
 src/renderer/components/result.vue    |  89 +++++++++++++++++
 src/renderer/components/search.vue    |  78 +++++++++++++++
 src/renderer/plugins-manager/index.ts |  52 +++++++++-
 src/renderer/shims-vue.d.ts           |   2 +
 10 files changed, 320 insertions(+), 218 deletions(-)
 create mode 100644 src/common/utils/throttle.ts
 create mode 100644 src/renderer/components/result.vue
 create mode 100644 src/renderer/components/search.vue

diff --git a/package-lock.json b/package-lock.json
index 7518707..a001b37 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1142,6 +1142,19 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@better-scroll/core": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/@better-scroll/core/-/core-2.4.2.tgz",
+      "integrity": "sha512-IqVZLnh04YpaEAy9wJDxtFK/stxVQjB9A9Wcr3Uwkj7Av1TtFpin+t/TObl53diNDG5ZJ+vck/OAthphpuugLA==",
+      "requires": {
+        "@better-scroll/shared-utils": "^2.4.2"
+      }
+    },
+    "@better-scroll/shared-utils": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/@better-scroll/shared-utils/-/shared-utils-2.4.2.tgz",
+      "integrity": "sha512-Gy/Jfbpu+hq0u+PcjkTqyXGqAf+0dexTzEZ5IDXEVwJVLmd3cx8A73oTcAZ8QZgk4wSHvlMjXecSaptkhnNPEw=="
+    },
     "@ctrl/tinycolor": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.4.0.tgz",
@@ -7458,103 +7471,6 @@
         "safe-buffer": "^5.1.1"
       }
     },
-    "execa": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-6.0.0.tgz",
-      "integrity": "sha512-m4wU9j4Z9nXXoqT8RSfl28JSwmMNLFF69OON8H/lL3NeU0tNpGz313bcOfYoBBHokB0dC2tMl3VUcKgHELhL2Q==",
-      "requires": {
-        "cross-spawn": "^7.0.3",
-        "get-stream": "^6.0.1",
-        "human-signals": "^3.0.1",
-        "is-stream": "^3.0.0",
-        "merge-stream": "^2.0.0",
-        "npm-run-path": "^5.0.1",
-        "onetime": "^6.0.0",
-        "signal-exit": "^3.0.5",
-        "strip-final-newline": "^3.0.0"
-      },
-      "dependencies": {
-        "cross-spawn": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-          "requires": {
-            "path-key": "^3.1.0",
-            "shebang-command": "^2.0.0",
-            "which": "^2.0.1"
-          }
-        },
-        "human-signals": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-3.0.1.tgz",
-          "integrity": "sha512-rQLskxnM/5OCldHo+wNXbpVgDn5A17CUoKX+7Sokwaknlq7CdSnphy0W39GU8dw59XiCXmFXDg4fRuckQRKewQ=="
-        },
-        "is-stream": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
-          "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA=="
-        },
-        "mimic-fn": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
-          "integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw=="
-        },
-        "npm-run-path": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.0.1.tgz",
-          "integrity": "sha512-ybBJQUSyFwEEhqO2lXmyKOl9ucHtyZBWVM0h0FiMfT/+WKxCUZFa95qAR2X3w/w6oigN3B0b2UNHZbD+kdfD5w==",
-          "requires": {
-            "path-key": "^4.0.0"
-          },
-          "dependencies": {
-            "path-key": {
-              "version": "4.0.0",
-              "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
-              "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ=="
-            }
-          }
-        },
-        "onetime": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
-          "integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
-          "requires": {
-            "mimic-fn": "^4.0.0"
-          }
-        },
-        "path-key": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="
-        },
-        "shebang-command": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-          "requires": {
-            "shebang-regex": "^3.0.0"
-          }
-        },
-        "shebang-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="
-        },
-        "strip-final-newline": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
-          "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw=="
-        },
-        "which": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-          "requires": {
-            "isexe": "^2.0.0"
-          }
-        }
-      }
-    },
     "expand-brackets": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
@@ -8446,11 +8362,6 @@
       "integrity": "sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==",
       "dev": true
     },
-    "get-stream": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg=="
-    },
     "get-symbol-description": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
@@ -10471,6 +10382,11 @@
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
+    },
     "lodash.transform": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/lodash.transform/-/lodash.transform-4.6.0.tgz",
@@ -10743,7 +10659,8 @@
     "merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
-      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "dev": true
     },
     "merge2": {
       "version": "1.4.1",
@@ -13837,7 +13754,8 @@
     "signal-exit": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.6.tgz",
-      "integrity": "sha512-sDl4qMFpijcGw22U5w63KmD3cZJfBuFlVNbVMKje2keoKML7X2UzWbc4XrmEbDwg0NXJc3yv4/ox7b+JWb57kQ=="
+      "integrity": "sha512-sDl4qMFpijcGw22U5w63KmD3cZJfBuFlVNbVMKje2keoKML7X2UzWbc4XrmEbDwg0NXJc3yv4/ox7b+JWb57kQ==",
+      "dev": true
     },
     "simple-swizzle": {
       "version": "0.2.2",
diff --git a/package.json b/package.json
index 9dc8fbc..6464faa 100644
--- a/package.json
+++ b/package.json
@@ -14,12 +14,14 @@
   },
   "main": "background.js",
   "dependencies": {
+    "@better-scroll/core": "^2.4.2",
     "ant-design-vue": "^2.2.8",
     "core-js": "^3.6.5",
     "cross-spawn": "^7.0.3",
     "get-mac-apps": "^1.0.2",
     "got": "^11.8.3",
     "libnpmsearch": "^3.1.2",
+    "lodash.throttle": "^4.1.1",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0-0",
     "vuex": "^4.0.0-0",
diff --git a/runner/src/App.vue b/runner/src/App.vue
index 5639172..3537be8 100644
--- a/runner/src/App.vue
+++ b/runner/src/App.vue
@@ -1,6 +1,9 @@
 <template>
-  {{pluginInfo}}
-  <webview id="webview" :src="`File://${pluginInfo.indexPath}`"></webview>
+  <webview
+    id="webview"
+    :src="`File://${pluginInfo.indexPath}`"
+    :preload="preload"
+  />
 </template>
 
 <script setup lang="ts">
@@ -10,6 +13,7 @@ const state = reactive({
 });
 
 window.setPluginInfo = (pluginInfo: any) => {
+  console.log(pluginInfo);
   try {
     state.pluginInfo = pluginInfo;
   } catch (e) {
diff --git a/src/common/utils/throttle.ts b/src/common/utils/throttle.ts
new file mode 100644
index 0000000..40179ea
--- /dev/null
+++ b/src/common/utils/throttle.ts
@@ -0,0 +1,40 @@
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export default function throttle(func, wait, options?: any): () => void {
+  let context, args, result;
+  let timeout = null;
+  let previous = 0;
+  if (!options) options = {};
+  const later = function () {
+    previous = options.leading === false ? 0 : Date.now();
+    timeout = null;
+    result = func.apply(context, args);
+    if (!timeout) context = args = null;
+  };
+  return () => {
+    const now = Date.now();
+    if (!previous && options.leading === false) previous = now;
+    // 计算剩余时间
+    const remaining = wait - (now - previous);
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    context = this;
+    // eslint-disable-next-line prefer-rest-params
+    args = arguments;
+    if (remaining <= 0 || remaining > wait) {
+      if (timeout) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        clearTimeout(timeout);
+        timeout = null;
+      }
+      previous = now;
+      result = func.apply(context, args);
+      if (!timeout) context = args = null;
+    } else if (!timeout && options.trailing !== false) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      timeout = setTimeout(later, remaining);
+    }
+    return result;
+  };
+}
diff --git a/src/main/browsers/runner.ts b/src/main/browsers/runner.ts
index cbf2767..368c709 100644
--- a/src/main/browsers/runner.ts
+++ b/src/main/browsers/runner.ts
@@ -29,7 +29,7 @@ export default () => {
 
     if (process.env.WEBPACK_DEV_SERVER_URL) {
       // Load the url of the dev server if in development mode
-      win.loadURL("http://localhost:8080" as string);
+      win.loadURL("http://localhost:8081" as string);
     } else {
       // Load the index.html when not in development
       win.loadURL(`file://${__static}/runner/index.html`);
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 94f96df..342b460 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -1,139 +1,64 @@
 <template>
   <div id="components-layout">
-    <div class="search-container">
-      <a-select
-        class="rubick-select"
-        v-model:value="selectFeat"
-        mode="tags"
-        style="width: 100%"
-        placeholder="HI, Rubick 2.0"
-        @select="handleChange"
-        autofocus
-        show-search
-        :maxTagTextLength="6"
-        :dropdownClassName="!options.length ? 'none-option' : 'rubick-option'"
-        @dropdownVisibleChange="changeWindowHeight"
-        :open="open"
-      >
-        <a-select-option
-          v-for="(item, index) in options"
-          :key="index"
-          :value="item"
-        >
-          <div class="search-item">
-
-          </div>
-        </a-select-option>
-      </a-select>
-      <div @click="openMenu" class="rubick-logo">
-        <img  src="./assets/logo.png" />
-      </div>
+    <div class="rubick-select">
+      <Search @changeCurrent="changeIndex" :menuPluginInfo="menuPluginInfo" @onSearch="onSearch" />
     </div>
+    <Result :searchValue="searchValue" :currentSelect="currentSelect" :options="options" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { reactive, toRefs } from "vue";
+import { watch, ref, nextTick } 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 { appList, initPlugins, getPluginInfo } = createPluginManager();
+const { initPlugins, getPluginInfo, options, onSearch, searchValue } = createPluginManager();
 
 initPlugins();
 
-const state = reactive({
-  selectFeat: [],
-  options: [],
-  open: false,
+const currentSelect = ref(0);
+const menuPluginInfo = ref({});
+
+getPluginInfo({
+  pluginName: "feature",
+  // eslint-disable-next-line no-undef
+  pluginPath: `${__static}/feature/plugin.json`,
+}).then((res) => {
+  menuPluginInfo.value = res;
 });
 
-const handleChange = (v: string) => {
-  state.selectFeat = v;
-  closeDropDown();
-};
-
-const closeDropDown = () => {
-  state.open = false;
-  setTimeout(() => {
+watch([searchValue], () => {
+  currentSelect.value = 0;
+  nextTick(() => {
     ipcRenderer.sendSync("msg-trigger", {
       type: "setExpendHeight",
-      height: getWindowHeight([]),
+      height: getWindowHeight(searchValue.value ? options.value : []),
     });
-  }, 200);
-};
-
-const changeWindowHeight = (open) => {
-  if (open) {
-    ipcRenderer.sendSync("msg-trigger", {
-      type: "setExpendHeight",
-      height: getWindowHeight(state.options),
-    });
-    state.open = open;
-  } else {
-    closeDropDown();
-  }
-};
-
-const openMenu = async () => {
-  const pluginInfo = await getPluginInfo({
-    pluginName: "feature",
-    // eslint-disable-next-line no-undef
-    pluginPath: `${__static}/feature/plugin.json`,
   });
-  console.log(pluginInfo)
-  ipcRenderer.sendSync("msg-trigger", {
-    type: "openPlugin",
-    plugin: pluginInfo,
-  });
-};
+});
 
-const { selectFeat, options, open } = toRefs(state);
+const changeIndex = (index) => {
+  if (!options.value.length) return;
+  if (
+    currentSelect.value + index > options.value.length - 1 ||
+    currentSelect.value + index < 0
+  )
+    return;
+  currentSelect.value = currentSelect.value + index;
+};
 </script>
 
 <style lang="less">
 #components-layout {
   height: 100vh;
-  overflow: auto;
-  overflow-x: hidden;
+  overflow: hidden;
   -webkit-app-region: drag;
-  .search-container {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding-right: 10px;
-  }
   ::-webkit-scrollbar {
     width: 0;
   }
-  .rubick-select {
-    font-size: 22px;
-    font-weight: normal;
-    flex: 1;
-    .ant-select-selector {
-      box-shadow: none !important;
-      height: 60px;
-      border: none;
-    }
-  }
-  .rubick-logo {
-    width: 40px;
-    height: 40px;
-    background: #574778;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 100%;
-    cursor: pointer;
-    img {
-      width: 32px;
-    }
-  }
-}
-.none-option {
-  display: none;
-}
-.rubick-option {
-  box-shadow: none !important;
 }
+
 </style>
diff --git a/src/renderer/components/result.vue b/src/renderer/components/result.vue
new file mode 100644
index 0000000..c81a18a
--- /dev/null
+++ b/src/renderer/components/result.vue
@@ -0,0 +1,89 @@
+<template>
+  <div v-show="!!options.length && searchValue" class="options" ref="scrollDom">
+    <a-list item-layout="horizontal" :dataSource="options">
+      <template #renderItem="{ item, index }">
+        <a-list-item
+          @click="() => item.click()"
+          :class="currentSelect === index ? 'active op-item' : 'op-item'"
+        >
+          <a-list-item-meta :description="renderDesc(item.desc)">
+            <template #title>
+              <span v-html="renderTitle(item.name)"></span>
+            </template>
+            <template #avatar>
+              <a-avatar
+                style="border-radius: 0"
+                :src="item.icon"
+              />
+            </template>
+          </a-list-item-meta>
+        </a-list-item>
+      </template>
+    </a-list>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import BScroll from "@better-scroll/core";
+import { defineProps, onMounted, ref } from "vue";
+const scrollDom = ref(null);
+
+onMounted(() => {
+  new BScroll(scrollDom.value);
+});
+
+const props = defineProps({
+  searchValue: {
+    type: [String, Number],
+    default: "",
+  },
+  options: {
+    type: Array,
+    default: () => [],
+  },
+  currentSelect: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const renderTitle = (title) => {
+  if (typeof title !== "string") return;
+  const result = title.toLowerCase().split(props.searchValue.toLowerCase());
+  if (result && result.length > 1) {
+    return `<div>${result[0]}<span style="color: red">${props.searchValue}</span>${result[1]}</div>`;
+  } else {
+    return `<div>${result[0]}</div>`;
+  }
+};
+
+const renderDesc = (desc) => {
+  if (desc.length > 80) {
+    return `${desc.substr(0, 63)}...${desc.substr(desc.length - 14, desc.length)}`
+  }
+  return desc;
+};
+</script>
+
+<style lang="less">
+.options {
+  position: absolute;
+  top: 62px;
+  left: 0;
+  width: 100%;
+  z-index: 99;
+  max-height: calc(~"100vh - 64px");
+  overflow: auto;
+  .op-item {
+    padding: 0 10px;
+    height: 60px;
+    line-height: 50px;
+    max-height: 500px;
+    overflow: auto;
+    background: #fafafa;
+    &.active {
+      background: #dee2e8;
+    }
+  }
+}
+</style>
diff --git a/src/renderer/components/search.vue b/src/renderer/components/search.vue
new file mode 100644
index 0000000..e2d5a4a
--- /dev/null
+++ b/src/renderer/components/search.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="rubick-select">
+    <a-input
+      class="main-input"
+      placeholder="Hi, Rubick2"
+      @change="(e) => emit('onSearch', e)"
+      @keydown.down="() => emit('changeCurrent', 1)"
+      @keydown.up="() => emit('changeCurrent', -1)"
+    >
+      <template #suffix>
+        <div @click="openMenu" class="suffix-tool" >
+          <div class="rubick-logo">
+            <img src="../assets/logo.png" />
+          </div>
+        </div>
+      </template>
+    </a-input>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, defineEmits, toRaw } from "vue";
+import { ipcRenderer } from "electron";
+
+const props = defineProps({
+  menuPluginInfo: {},
+});
+
+const emit = defineEmits(["onSearch", "changeCurrent"]);
+
+const openMenu = async () => {
+  ipcRenderer.sendSync("msg-trigger", {
+    type: "openPlugin",
+    plugin: toRaw(props.menuPluginInfo),
+  });
+};
+</script>
+
+<style lang="less">
+.rubick-select {
+  display: flex;
+  padding-left: 10px;
+  background: #fff;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  .main-input {
+    height: 60px !important;
+    box-sizing: border-box;
+    flex: 1;
+    border: none;
+    outline: none;
+    box-shadow: none !important;
+    .ant-select-selection, .ant-input, .ant-select-selection__rendered {
+      height: 100% !important;
+      font-size: 22px;
+      border: none !important;
+    }
+  }
+  .rubick-logo {
+    width: 40px;
+    height: 40px;
+    background: #574778;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 100%;
+    img {
+      width: 32px;
+    }
+  }
+  .ant-input:focus {
+    border: none;
+    box-shadow: none;
+  }
+}
+</style>
diff --git a/src/renderer/plugins-manager/index.ts b/src/renderer/plugins-manager/index.ts
index 113d050..3e63f60 100644
--- a/src/renderer/plugins-manager/index.ts
+++ b/src/renderer/plugins-manager/index.ts
@@ -1,7 +1,8 @@
-import { reactive, toRefs } from "vue";
+import { reactive, toRefs, nextTick } from "vue";
 import { nativeImage, remote } from "electron";
 import { appSearch, PluginHandler } from "@/core";
 import path from "path";
+import throttle from "lodash.throttle";
 
 const appPath = remote.app.getPath("cache");
 
@@ -14,6 +15,8 @@ const createPluginManager = (): any => {
   const state: any = reactive({
     appList: [],
     plugins: [],
+    options: [],
+    searchValue: "",
   });
 
   const initPlugins = async () => {
@@ -28,10 +31,47 @@ const createPluginManager = (): any => {
     // todo
   };
 
-  const searchPlugin = () => {
+  const onSearch = throttle((e) => {
+    const value = e.target.value;
+    state.searchValue = value;
+    if (!value) return;
     // todo 先搜索 plugin
     // todo 再搜索 app
-  };
+    let options: any = [];
+    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);
 
   const getPluginInfo = async ({ pluginName, pluginPath }) => {
     const pluginInfo = await pluginInstance.getAdapterInfo(pluginName, pluginPath);
@@ -41,12 +81,16 @@ const createPluginManager = (): any => {
     };
   };
 
+  const _openPlugin = ({ plugin }) => {
+    //
+  };
+
   return {
     ...toRefs(state),
     initPlugins,
     addPlugin,
     removePlugin,
-    searchPlugin,
+    onSearch,
     getPluginInfo,
   };
 };
diff --git a/src/renderer/shims-vue.d.ts b/src/renderer/shims-vue.d.ts
index b58d723..7b00668 100644
--- a/src/renderer/shims-vue.d.ts
+++ b/src/renderer/shims-vue.d.ts
@@ -10,3 +10,5 @@ declare module 'main' {
 }
 
 declare const __static: string
+
+declare module 'lodash.throttle'