rubick/src/renderer/App.vue

<template>
  <a-layout id="components-layout">
    <div v-if="!searchType" class="rubick-select">
      <div class="tag-container" v-if="selected">
        <a-tag
            :key="selected.key"
            @close="closeTag"
            class="select-tag"
            color="green"
            closable
        >
          {{ selected.name }}
        </a-tag>
      </div>
      <a-input
          id="search"
          :placeholder="subPlaceHolder && selected && selected.key === 'plugin-container' ? subPlaceHolder : 'Hi, Rubick'"
          class="main-input"
          @change="e => search({value: e.target.value})"
          :value="searchValue"
          :maxLength="selected && selected.key !== 'plugin-container' ? 0 : 1000"
          @keydown.down="(e) => changeCurrent(1)"
          @keydown.up="() => changeCurrent(-1)"
          @keypress.enter="(e) => targetSearch({value: e.target.value, type: 'enter'})"
          @keypress.space="(e) => targetSearch({value: e.target.value, type: 'space'})"
      >
        <div @click="goMenu" class="suffix-tool" slot="suffix">
          <a-icon v-show="selected && selected.key === 'plugin-container'" class="icon-more" type="more" />
          <img class="icon-tool" v-if="selected && selected.icon" :src="selected.icon" />
          <div v-else class="rubick-logo">
            <img src="./assets/logo.png" />
          </div>
        </div>

      </a-input>
      <div class="options" v-show="showOptions">
        <a-list item-layout="horizontal" :data-source="options">
          <a-list-item
              @click="() => item.click($router)"
              :class="currentSelect === index ? 'active op-item' : 'op-item'"
              slot="renderItem"
              slot-scope="item, index"
          >
            <a-list-item-meta
                :description="item.desc"
            >
              <span slot="title" v-html="renderTitle(item.name)" ></span>
              <a-avatar
                  slot="avatar"
                  :src="item.icon"
              />
            </a-list-item-meta>
            <a-tag v-show="item.type === 'dev'">开发者</a-tag>
            <a-tag v-show="item.type === 'system'">系统</a-tag>
          </a-list-item>
        </a-list>
      </div>
    </div>
    <div class="rubick-select-subMenu" v-else>
      <div>
        <img class="icon-tool-sub" v-if="query && query.icon" :src="query.icon" />
        <a-input
            :placeholder="subPlaceHolder"
            class="sub-input"
            @change="(e) => search({value: e.target.value, searchType: $route.query.searchType})"
            :value="searchValue"
            @keypress.enter="(e) => targetSearch({value: e.target.value, type: 'enter'})"
            @keypress.space="(e) => targetSearch({value: e.target.value, type: 'space'})"
        ></a-input>
      </div>

      <div class="icon-container">
        <a-icon class="icon" type="info-circle" />
        <a-icon class="icon" type="setting" />
      </div>
    </div>
    <router-view></router-view>
  </a-layout>
</template>
<script>
import {mapActions, mapMutations, mapState} from "vuex";
import {ipcRenderer, remote} from "electron";
import {getWindowHeight, debounce, searchKeyValues, fileLists} from "./assets/common/utils";
const opConfig = remote.getGlobal('opConfig');
const {Menu, MenuItem} = remote;

export default {
  data() {
    return {
      searchType: this.$route.query.searchType ? 'subWindow' : '',
      query: this.$route.query,
      searchFn: null,
      config: opConfig.get(),
      currentSelect: 0,
    }
  },
  mounted() {
    ipcRenderer.on('init-rubick', this.closeTag);
    ipcRenderer.on('new-window', this.newWindow);
    // 超级面板打开插件
    ipcRenderer.on('superPanel-openPlugin', (e, args) => {
      this.openPlugin({
        cmd: args.cmd,
        plugin: args.plugin,
        feature: args.feature,
        router: this.$router,
        payload: args.data,
      })
    });
    ipcRenderer.on('global-short-key', (e, args) => {
      let config;
      this.devPlugins.forEach((plugin) => {
        // dev 插件未开启
        if (plugin.type === 'dev' && !plugin.status) return;
        const feature = plugin.features;
        feature.forEach(fe => {
          const cmd = searchKeyValues(fe.cmds, args)[0];
          const systemPlugin = fileLists.filter(plugin => plugin.name.indexOf(args) >= 0)[0];
          if (cmd) {
            config = {
              cmd: cmd,
              plugin: plugin,
              feature: fe,
              router: this.$router
            }
          } else if (systemPlugin) {
            config = {
              plugin: systemPlugin,
              router: this.$router
            }
          }
        })
      });
      config && this.openPlugin(config);
    });
    const searchNd = document.getElementById('search');
    searchNd && searchNd.addEventListener('keydown', this.checkNeedInit)
  },
  methods: {
    ...mapActions('main', ['onSearch', 'showMainUI', 'openPlugin']),
    ...mapMutations('main', ['commonUpdate']),
    search(v) {
      if (!this.searchFn) {
        this.searchFn = debounce(this.onSearch, 200);
      }
      this.searchFn(v);
    },
    targetSearch(action) {
      // 在插件界面唤起搜索功能
      if((this.selected && this.selected.key === 'plugin-container') || this.searchType === 'subWindow') {
        const webview = document.getElementById('webview');
        if (action.type === 'space') {
          if (this.config.perf.common.space) {
            webview.send('msg-back-setSubInput', this.searchValue);
          }
          return;
        }
        webview.send('msg-back-setSubInput', this.searchValue);
      } else if (this.showOptions) {
        const item = this.options[this.currentSelect]
        item.click(this.$router);
      }
    },
    changeCurrent(index) {
      this.currentSelect = this.currentSelect + index;
    },

    renderTitle(title) {
      const result = title.split(this.searchValue);
      return `<div>${result[0]}<span style="color: red">${this.searchValue}</span>${result[1]}</div>`
    },
    checkNeedInit(e) {
      // 如果搜索栏无内容，且按了删除键，则清空 tag
      if (this.searchValue === '' && e.keyCode === 8) {
        this.closeTag();
      }
    },
    changePath({key}) {
      this.$router.push({path: `/home/${key}`});
      this.commonUpdate({
        current: [key]
      })
    },
    closeTag(v) {
      this.commonUpdate({
        selected: null,
        showMain: false,
        options: [],
      });
      ipcRenderer.send('changeWindowSize-rubick', {
        height: getWindowHeight([]),
      });
      this.$router.push({
        path: '/home',
      });
    },
    newWindow() {
      ipcRenderer.send('new-window', {
        ...this.selected,
        ...this.$route.query,
      });
      this.closeTag();
    },
    goMenu() {
      if (this.selected && this.selected.key === 'plugin-container') {
        const pluginMenu = [
          {
            label: '分离窗口',
            click: this.newWindow
          },
          {
            label: '开发者工具',
            click: () => {
              const webview = document.getElementById('webview');
              webview.openDevTools()
            }
          },
          {
            label: '当前插件信息',
            submenu: [
              {
                label: '简介',
              },
              {
                label: '功能'
              }
            ]
          },
          {
            label: '隐藏插件',
          },
        ];
        let menu = Menu.buildFromTemplate(pluginMenu);
        menu.popup();
        return;
      }
      this.showMainUI();
      this.changePath({key: 'market'})
    },
  },
  computed: {
    ...mapState('main', ['showMain', 'devPlugins', 'current', 'options', 'selected', 'searchValue', 'subPlaceHolder']),
    showOptions() {
      // 有选项值，且不在显示主页
      if (this.options.length && !this.showMain) {
        return true;
      }
    }
  }
};
</script>
<style lang="less">
* {
  margin: 0;
  padding: 0;
}
#components-layout {
  padding-top: 60px;
  height: 100vh;
  overflow: auto;
  ::-webkit-scrollbar {
    width: 0;
  }
}
.rubick-select, .rubick-select-subMenu {
  display: flex;
  padding-left: 10px;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  .rubick-logo {
    width: 40px;
    height: 40px;
    background: #314659;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    img {
      width: 28px;
    }
  }
  .tag-container {
    display: flex;
    align-items: center;
    background: #fff;

    .select-tag {
      height: 36px;
      font-size: 20px;
      display: flex;
      align-items: center;
    }
  }

  .ant-input:focus {
    border: none;
    box-shadow: none;
  }

  .options {
    position: absolute;
    top: 62px;
    left: 0;
    width: 100%;
    z-index: 99;
    max-height: calc(~'100vh - 60px');
    overflow: auto;
    .op-item {
      padding: 0 10px;
      height: 60px;
      line-height: 50px;
      max-height: 500px;
      overflow: auto;
      background: #fafafa;
      &.active {
        background: #DEE2E8;
      }
    }
  }
}
.rubick-select-subMenu {
  -webkit-app-region: drag;
  background: #eee;
  height: 50px;
  padding-left: 200px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .icon-tool-sub {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    margin-right: 10px;
  }
  .icon-container {
    display: flex;
    align-items: center;
    font-size: 20px;
    color: #999;
    .icon {
      margin-right: 10px;
      cursor: pointer;
    }
  }
  .sub-input {
    width: 310px;
    border-radius: 100px;
  }
}
.suffix-tool {
  display: flex;
  align-items: center;
  .icon-more {
    font-size: 26px;
    font-weight: bold;
    cursor: pointer;
  }
}
</style>