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

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>