前言

为了进一步提高开发工作效率，最近咱们基于 electron 开发了一款媲美 uTools 的开源工具箱 rubick。该工具箱不仅仅开源，最重要的是能够应用 uTools 生态内所有开源插件！这将是微小的能力，意味着 uTools 生态内所有插件能够无差异化应用到 rubick 中。

设计交互上为了更能进步用户的应用效率，咱们又尝试去实现了 uTools 中十分优良的一些设计，比方：超级面板。该性能能够通过鼠标疾速唤起uTools 插件能力，而不必再关上利用。比方上传图片，只有咱们装置了图床插件，那么当鼠标抉择桌面上某张图片时，即可疾速呼出上传图片的菜单选项，不便省事。接下来一起看看实现形式吧！

代码仓库

Rubick github

性能截图：

文件夹下长按右建

抉择文件后长按右键

抉择文字后长按右键

实现原理

获取选中文案

要实现改性能外围是要读取以后用户选中的文案或者文件，依据以后抉择内容进行不同性能展现。然而外围有一个问题是如何来实现获取以后选中的内容。这个问题思考了很久很久，要想获取选中的文案，感觉惟一的方法是应用 ctrl + c 或者 command + c 来先复制到剪切板，再通过 electron clipboard 来获取以后剪切板内容。然而 utools 可不是通过先复制再长按这样的操作来实现的，而是间接选中文本或者文件长按后呼起超级面板。所以肯定要在右击长按前获取到以后选中的内容。

如果要这么干，可能真的无解了，之前就因为这么想，才被无解了。正确的思路应该是先长按再获取选中的内容。别看只是掉了个个，但实现的确天壤之别：

  1. 先获取选中内容：这就要求咱们必须监听原生零碎选中事件，然而 electron 并没有提供能力，咱们也无奈监听系统抉择事件。
  2. 先右击，后获取内容，这样的益处在于先右击能够通过监听鼠标右击事件，相比抉择事件更加容易。

所以思路就有了，先监听长按右击事件：

// macosconst mouseEvents = require("osx-mouse");const mouseTrack = mouseEvents();// 按上来的 timelet down_time = 0;// 是否弹起let isPress = false;// 监听右击mouseTrack.on('right-down', () => {    isPress = true;    down_time = Date.now();    // 长按 500ms 后触发    setTimeout(async () => {      if (isPress) {        // 获取选中内容        const copyResult = await getSelectedText();    }, 500);})mouseTrack.on('right-up', () => {    isPress = false;});

接下来一步就是要去实现获取选中内容，要获取选中内容有个比拟骚的操作，就是：

  1. 通过 clipboard 先获取以后剪切板内容，并存下 A
  2. 通过 robot.js 来调用零碎 command + c 或者 ctrl + c
  3. 再通过 clipboard 先获取以后剪切板内容，并存下 B
  4. 再将 A 写到剪切板中，返回 B

先存剪切板内容的目标在于咱们是偷偷帮用户执行了复制动作，当读取完用户抉择内容后，须要回复用户之前的剪切板内容。接下来看一下简略的实现：

const getSelected = () => {  return new Promise((resolve) => {    // 缓存之前的文案    const lastText = clipboard.readText('clipboard');    const platform = process.platform;        // 执行复制动作    if (platform === 'darwin') {      robot.keyTap('c', 'command');    } else {      robot.keyTap('c', 'control');    }    setTimeout(() => {      // 读取剪切板内容      const text = clipboard.readText('clipboard') || ''      const fileUrl = clipboard.read('public.file-url');            // 复原剪切板内容      clipboard.writeText(lastText);      resolve({        text,        fileUrl      })    }, 300);  })}

告诉超级面板窗口以后选中内容

当获取到了选中内容后，接下来就是须要创立超级面板的 BrowserWindow:

const { BrowserWindow, ipcMain, app } = require("electron");module.exports = () => {  let win;  let init = (mainWindow) => {    if (win === null || win === undefined) {      createWindow();    }  };  let createWindow = () => {    win = new BrowserWindow({      frame: false,      autoHideMenuBar: true,      width: 250,      height: 50,      show: false,      alwaysOnTop: true,      webPreferences: {        webSecurity: false,        enableRemoteModule: true,        backgroundThrottling: false,        nodeIntegration: true,        devTools: false,      },    });    win.loadURL(`file://${__static}/plugins/superPanel/index.html`);    win.once('ready-to-show', () => win.show());    win.on("closed", () => {      win = undefined;    });  };  let getWindow = () => win;  return {    init: init,    getWindow: getWindow,  };};

而后再告诉 superPanel 进行内容展现：

 win.webContents.send('trigger-super-panel', {  ...copyResult,  optionPlugin: optionPlugin.plugins,});

超级面板点击操作

接下来要实现超级面板点击操作，这块也是比较简单的了，间接上代码好了：

1. 关上 Terminal

const { spawn } = require ('child_process');spawn('open', [ '-a', 'Terminal', fileUrl ]);

2. 新建文件

remote.dialog.showSaveDialog({  title: "请抉择要保留的文件名",  buttonLabel: "保留",  defaultPath: fileUrl.replace('file://', ''),  showsTagField: false,  nameFieldLabel: '',}).then(result => {  fs.writeFileSync(result.filePath, '');});

3. 复制门路

clipboard.writeText(fileUrl.replace('file://', ''))

最初

本篇次要介绍如何实现一个相似于 utools 的超级面板性能，当然这远远不是 utools 的全副，下期咱们再持续介绍如何实现 utools 其余能力。欢送大家返回体验 Rubick 有问题能够随时提 issue 咱们会及时反馈。

另外，如果感觉设计实现思路对你有用，也欢送给个 Star：https://github.com/clouDr-f2e/rubick