✨ 主界面开发&插件运行容器开发&菜单开发

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>

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>

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>

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

src/renderer/shims-vue.d.ts

@@ -10,3 +10,5 @@ declare module 'main' {
 }
 
 declare const __static: string
+
+declare module 'lodash.throttle'