rubick/src/renderer/App.vue

<template>
  <div
    v-if="commonConst.windows() || commonConst.linux()"
    class="drag-bar"
  ></div>
  <div
    :class="!commonConst.windows() && !commonConst.linux() && 'drag'"
    id="components-layout"
  >
    <div class="rubick-select">
      <Search
        :currentPlugin="currentPlugin"
        @changeCurrent="changeIndex"
        @onSearch="onSearch"
        @openMenu="openMenu"
        @changeSelect="changeSelect"
        :searchValue="searchValue"
        :placeholder="placeholder"
        :pluginLoading="pluginLoading"
        :clipboardFile="clipboardFile || []"
        @choosePlugin="choosePlugin"
        @focus="searchFocus"
        @clear-search-value="clearSearchValue"
        @clearClipbord="clearClipboardFile"
        @readClipboardContent="readClipboardContent"
      />
    </div>
    <Result
      :currentPlugin="currentPlugin"
      :searchValue="searchValue"
      :currentSelect="currentSelect"
      :options="options"
      :clipboardFile="clipboardFile || []"
    />
  </div>
</template>

<script setup lang="ts">
import { watch, ref, nextTick, toRaw } from 'vue';
import { ipcRenderer, remote } 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';
import commonConst from '@/common/utils/commonConst';

const {
  initPlugins,
  getPluginInfo,
  options,
  onSearch,
  searchValue,
  changeSelect,
  openPlugin,
  currentPlugin,
  placeholder,
  pluginLoading,
  searchFocus,
  clipboardFile,
  setSearchValue,
  clearClipboardFile,
  readClipboardContent,
} = createPluginManager();

initPlugins();

const currentSelect = ref(0);
const menuPluginInfo: any = ref({});

getPluginInfo({
  pluginName: 'feature',
  // eslint-disable-next-line no-undef
  pluginPath: `${__static}/feature/package.json`,
}).then((res) => {
  menuPluginInfo.value = res;
  remote.getGlobal('LOCAL_PLUGINS').addPlugin(res);
});

watch([options], () => {
  currentSelect.value = 0;
  if (currentPlugin.value.name) return;
  nextTick(() => {
    ipcRenderer.sendSync('msg-trigger', {
      type: 'setExpendHeight',
      data: getWindowHeight(options.value),
    });
  });
});

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

const openMenu = (ext) => {
  openPlugin({
    ...toRaw(menuPluginInfo.value),
    feature: menuPluginInfo.value.features[0],
    cmd: '插件市场',
    ext,
  });
};

window.rubick.openMenu = openMenu;

const choosePlugin = () => {
  const currentChoose = options.value[currentSelect.value];
  currentChoose.click();
};

const clearSearchValue = () => {
  setSearchValue('');
};
</script>

<style lang="less">
@import './assets/var.less';
.drag-bar {
  -webkit-app-region: drag;
  width: 100%;
  height: 20px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
}

#components-layout {
  height: 100vh;
  overflow: hidden;
  background: var(--color-body-bg);
  ::-webkit-scrollbar {
    width: 0;
  }
}

.drag {
  -webkit-app-region: drag;
}
</style>