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

src/renderer/App.vue

@@ -1,17 +1,139 @@
 <template>
-  <router-view />
+  <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>
+  </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
+import { reactive, toRefs } from "vue";
+import { ipcRenderer } from "electron";
+import getWindowHeight from "../common/utils/getWindowHeight";
+import createPluginManager from "./plugins-manager";
 
+const { appList, initPlugins, getPluginInfo } = createPluginManager();
+
+initPlugins();
+
+const state = reactive({
+  selectFeat: [],
+  options: [],
+  open: false,
+});
+
+const handleChange = (v: string) => {
+  state.selectFeat = v;
+  closeDropDown();
+};
+
+const closeDropDown = () => {
+  state.open = false;
+  setTimeout(() => {
+    ipcRenderer.sendSync("msg-trigger", {
+      type: "setExpendHeight",
+      height: getWindowHeight([]),
+    });
+  }, 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);
 </script>
 
 <style lang="less">
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
+#components-layout {
+  height: 100vh;
+  overflow: auto;
+  overflow-x: 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/HelloWorld.vue

@@ -1,140 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br />
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
-        >vue-cli documentation</a
-      >.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
-          target="_blank"
-          rel="noopener"
-          >babel</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
-          target="_blank"
-          rel="noopener"
-          >router</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
-          target="_blank"
-          rel="noopener"
-          >vuex</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
-          target="_blank"
-          rel="noopener"
-          >eslint</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript"
-          target="_blank"
-          rel="noopener"
-          >typescript</a
-        >
-      </li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li>
-        <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
-      </li>
-      <li>
-        <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
-          >Forum</a
-        >
-      </li>
-      <li>
-        <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
-          >Community Chat</a
-        >
-      </li>
-      <li>
-        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
-          >Twitter</a
-        >
-      </li>
-      <li>
-        <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
-      </li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li>
-        <a href="https://router.vuejs.org" target="_blank" rel="noopener"
-          >vue-router</a
-        >
-      </li>
-      <li>
-        <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-devtools#vue-devtools"
-          target="_blank"
-          rel="noopener"
-          >vue-devtools</a
-        >
-      </li>
-      <li>
-        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
-          >vue-loader</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/awesome-vue"
-          target="_blank"
-          rel="noopener"
-          >awesome-vue</a
-        >
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  name: "HelloWorld",
-  props: {
-    msg: String,
-  },
-});
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="less">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/renderer/main.ts

@@ -1,6 +1,6 @@
 import { createApp } from "vue";
+import Antd from "ant-design-vue";
 import App from "./App.vue";
-import router from "./router";
-import store from "./store";
+import "ant-design-vue/dist/antd.css";
 
-createApp(App).use(store).use(router).mount("#app");
+createApp(App).use(Antd).mount("#app");

src/renderer/plugins-manager/index.ts

@@ -0,0 +1,54 @@
+import { reactive, toRefs } from "vue";
+import { nativeImage, remote } from "electron";
+import { appSearch, PluginHandler } from "@/core";
+import path from "path";
+
+const appPath = remote.app.getPath("cache");
+
+const createPluginManager = (): any => {
+  const baseDir = path.join(appPath, "./rubick-plugins");
+  const pluginInstance = new PluginHandler({
+    baseDir: baseDir,
+  });
+
+  const state: any = reactive({
+    appList: [],
+    plugins: [],
+  });
+
+  const initPlugins = async () => {
+    state.appList = await appSearch(nativeImage);
+  };
+
+  const addPlugin = (plugin: any) => {
+    state.plugins.unshift(plugin);
+  };
+
+  const removePlugin = (plugin: any) => {
+    // todo
+  };
+
+  const searchPlugin = () => {
+    // todo 先搜索 plugin
+    // todo 再搜索 app
+  };
+
+  const getPluginInfo = async ({ pluginName, pluginPath }) => {
+    const pluginInfo = await pluginInstance.getAdapterInfo(pluginName, pluginPath);
+    return {
+      ...pluginInfo,
+      indexPath: path.join(pluginPath, "../", pluginInfo.main),
+    };
+  };
+
+  return {
+    ...toRefs(state),
+    initPlugins,
+    addPlugin,
+    removePlugin,
+    searchPlugin,
+    getPluginInfo,
+  };
+};
+
+export default createPluginManager;

src/renderer/router/index.ts

@@ -1,26 +0,0 @@
-import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
-import Home from "../views/Home.vue";
-
-const routes: Array<RouteRecordRaw> = [
-  {
-    path: "/",
-    name: "Home",
-    component: Home,
-  },
-  {
-    path: "/about",
-    name: "About",
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () =>
-      import(/* webpackChunkName: "about" */ "../views/About.vue"),
-  },
-];
-
-const router = createRouter({
-  history: createWebHashHistory(),
-  routes,
-});
-
-export default router;

src/renderer/shims-vue.d.ts

@@ -8,3 +8,5 @@ declare module '*.vue' {
 declare module 'main' {
   export function main (): any
 }
+
+declare const __static: string

src/renderer/store/index.ts

@@ -1,8 +0,0 @@
-import { createStore } from "vuex";
-
-export default createStore({
-  state: {},
-  mutations: {},
-  actions: {},
-  modules: {},
-});

src/renderer/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/renderer/views/Home.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png" />
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src
-
-export default defineComponent({
-  name: "Home",
-  components: {
-    HelloWorld,
-  },
-});
-</script>