rubick/src/renderer/components/search.vue

<template>
  <div class="rubick-select">
    <div class="select-tag" v-show="currentPlugin.cmd">
      {{ currentPlugin.cmd }}
    </div>
    <div
      :class="clipboardFile[0].name ? 'clipboard-tag' : 'clipboard-img'"
      v-if="!!clipboardFile.length"
    >
      <img :src="getIcon()" />
      <div class="ellipse">{{ clipboardFile[0].name }}</div>
      <a-tag color="#aaa" v-if="clipboardFile.length > 1">{{
        clipboardFile.length
      }}</a-tag>
    </div>
    <a-input
      id="search"
      ref="mainInput"
      class="main-input"
      @input="e => changeValue(e)"
      @keydown.down="e => keydownEvent(e, 'down')"
      @keydown.up="e => keydownEvent(e, 'up')"
      @keydown="e => checkNeedInit(e)"
      :value="searchValue"
      :placeholder="placeholder || 'Hi, Rubick2'"
      @keypress.enter="e => keydownEvent(e, 'enter')"
      @keypress.space="e => keydownEvent(e, 'space')"
      @focus="emit('focus')"
    >
      <template #suffix>
        <div class="suffix-tool">
          <MoreOutlined @click="showSeparate()" class="icon-more" />
          <div
            v-if="currentPlugin && currentPlugin.logo"
            style="position: relative"
          >
            <a-spin v-show="pluginLoading" class="loading">
              <template #indicator>
                <LoadingOutlined style="font-size: 42px" />
              </template>
            </a-spin>
            <img class="icon-tool" :src="currentPlugin.logo" />
          </div>
          <div @click="() => emit('openMenu')" v-else class="rubick-logo">
            <img src="../assets/logo.png" />
          </div>
        </div>
      </template>
    </a-input>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, ref } from 'vue';
import { ipcRenderer, remote } from 'electron';
import { LoadingOutlined, MoreOutlined } from '@ant-design/icons-vue';

const opConfig = remote.getGlobal('OP_CONFIG');
const { Menu } = remote;

const config = ref(opConfig.get());

const props: any = defineProps({
  searchValue: {
    type: [String, Number],
    default: '',
  },
  placeholder: {
    type: String,
    default: '',
  },
  currentPlugin: {},
  pluginLoading: Boolean,
  clipboardFile: (() => [])(),
});

const changeValue = e => {
  if (props.currentPlugin.name === 'rubick-system-feature') return;
  targetSearch({ value: e.target.value });
  emit('onSearch', e);
};

const emit = defineEmits([
  'onSearch',
  'changeCurrent',
  'openMenu',
  'changeSelect',
  'choosePlugin',
  'focus',
  'clearSearchValue',
  'readClipboardContent',
]);

const keydownEvent = (e, key: string) => {
  const { ctrlKey, shiftKey, altKey, metaKey } = e;
  const modifiers: Array<string> = [];
  ctrlKey && modifiers.push('control');
  shiftKey && modifiers.push('shift');
  altKey && modifiers.push('alt');
  metaKey && modifiers.push('meta');
  ipcRenderer.send('msg-trigger', {
    type: 'sendPluginSomeKeyDownEvent',
    data: {
      keyCode: e.code,
      modifiers,
    },
  });
  const runPluginDisable = e.target.value === '' || props.currentPlugin.name;
  switch (key) {
    case 'up':
      emit('changeCurrent', -1);
      break;
    case 'down':
      emit('changeCurrent', 1);
      break;
    case 'enter':
      if (runPluginDisable) return;
      emit('choosePlugin');
      break;
    case 'space':
      if (runPluginDisable || !opConfig.get().perf.common.space) return;
      emit('choosePlugin');
      break;
    default:
      break;
  }
};

const checkNeedInit = e => {
  const { ctrlKey, metaKey } = e;

  if (e.target.value === '' && e.keyCode === 8) {
    closeTag();
  }
  // 手动粘贴
  if ((ctrlKey || metaKey) && e.key === 'v') {
    emit('readClipboardContent');
  }
};

const targetSearch = ({ value }) => {
  if (props.currentPlugin.name) {
    return ipcRenderer.sendSync('msg-trigger', {
      type: 'sendSubInputChangeEvent',
      data: { text: value },
    });
  }
};

const closeTag = () => {
  emit('changeSelect', {});
  emit('clearClipbord');
  ipcRenderer.send('msg-trigger', {
    type: 'removePlugin',
  });
};

const showSeparate = () => {
  let pluginMenu: any = [
    {
      label: config.value.perf.common.hideOnBlur ? '钉住' : '自动隐藏',
      click: changeHideOnBlur,
    },
  ];
  if (props.currentPlugin && props.currentPlugin.logo) {
    pluginMenu = pluginMenu.concat([
      {
        label: '开发者工具',
        click: () => {
          ipcRenderer.send('msg-trigger', { type: 'openPluginDevTools' });
          // todo
        },
      },
      {
        label: '当前插件信息',
        submenu: [
          {
            label: '简介',
          },
          {
            label: '功能',
          },
        ],
      },
      {
        label: '分离窗口',
        click: newWindow,
      },
    ]);
  }
  let menu = Menu.buildFromTemplate(pluginMenu);
  menu.popup();
};

const changeHideOnBlur = () => {
  let cfg = { ...config.value };
  cfg.perf.common.hideOnBlur = !cfg.perf.common.hideOnBlur;
  opConfig.set(cfg);
  config.value = cfg;
};

const getIcon = () => {
  if (props.clipboardFile[0].dataUrl) return props.clipboardFile[0].dataUrl;
  return props.clipboardFile[0].isFile
    ? require('../assets/file.png')
    : require('../assets/folder.png');
};

const newWindow = () => {
  ipcRenderer.send('msg-trigger', {
    type: 'detachPlugin',
  });
  // todo
};

const mainInput = ref(null);
window.rubick.hooks.onShow = () => {
  (mainInput.value as unknown as HTMLDivElement).focus();
};

window.rubick.hooks.onHide = () => {
  emit('clearSearchValue');
};
</script>

<style lang="less">
.rubick-select {
  display: flex;
  padding-left: 10px;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  align-items: center;
  .ellipse {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
  }

  .select-tag {
    white-space: pre;
    user-select: none;
    font-size: 18px;
    border-radius: 16px;
    height: 32px;
    position: relative;
    color: #fff;
    background-color: rgba(255, 78, 164, 0.8);
    display: inline-flex;
    align-items: center;
    margin-right: 1px;
    padding: 0 10px;
  }

  .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,
  .icon-tool {
    width: 40px;
    height: 40px;
    background: #574778;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    img {
      width: 32px;
    }
  }
  .icon-tool {
    background: #fff;
  }
  .ant-input:focus {
    border: none;
    box-shadow: none;
  }
  .suffix-tool {
    display: flex;
    align-items: center;
    .icon-more {
      font-size: 26px;
      font-weight: bold;
      cursor: pointer;
    }
    .loading {
      color: #ff4ea4;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  .clipboard-tag {
    white-space: pre;
    user-select: none;
    font-size: 16px;
    height: 32px;
    position: relative;
    align-items: center;
    display: flex;
    border: 1px solid #e6e6e6;
    padding: 0 8px;
    margin-right: 12px;
    img {
      width: 24px;
      height: 24px;
      margin-right: 6px;
    }
  }
  .clipboard-img {
    white-space: pre;
    user-select: none;
    font-size: 16px;
    height: 32px;
    position: relative;
    align-items: center;
    display: flex;
    img {
      width: 32px;
      height: 32px;
    }
  }
}
</style>